I am using gulp.The tasks are getting run creating required folders. But I get Cannot GET/ error when run in browser.I have attached the image of my project structure and also the output in command line. .My index.html contains the following
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<title>Angular hello world app</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<ng-view class="view"></ng-view>
</body>
<script src="js/scripts.js"></script>
</html>
I want to know why it cannot get or not routed properly and what should be done. So the problem is when the server is running on localhost and I hit localhost:3000/ in browser it says cannot get with a white background.Following is my gulpfile.js
const gulp = require('gulp');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const scripts = require('./scripts');
const styles = require('./styles');
var devMode = false;
gulp.task('css',function(){
gulp.src(styles)
.pipe(concat('main.css'))
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.reload({
stream : true
}))
});
gulp.task('js',function(){
gulp.src(scripts)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./dist/js'))
.pipe(browserSync.reload({
stream : true
}))
});
gulp.task('html',function(){
gulp.src('./templates/**/*.html')
.pipe(gulp.dest('./dist/html'))
.pipe(browserSync.reload({
stream : true
}))
});
gulp.task('build',function(){
gulp.start(['css','js','html']);
console.log("finshed build");
});
gulp.task('browser-sync',function(){
browserSync.init(null,{
open : false,
server : {
baseDir : 'dist'
}
});
console.log("finshed browser ");
});
gulp.task('start',function(){
devMode = true;
gulp.start(['build','browser-sync']);
gulp.watch(['./css/**/*.css'],['css']);
gulp.watch(['./js/**/*.js'],['js']);
gulp.watch(['./templates/**/*.html'],['html']);
});
Since your baseDir is 'dist' you need to run http://localhost:3000/html in the browser I think that should work.
You need to point browserSync to the dist/html/index.html file as the start page with index.
gulp.task('browser-sync',function(){
browserSync.init(null,{
open : false,
server : {
baseDir : 'dist',
index : "html/index.html"
}
});
console.log("finshed browser ");
});
Related
I tried to learn how to read static files with express from a reliable website. And then I found that not know why, my terminal tell me I'm success but website show me "Cannot Get /"(as following image show). I had found a lot of solution (e.g. in my html file, I add script src to socket.io) but still fail. Where can I start to deal with it? Please help me...
terminal show success
website show error
And the following is my code:
C:\...\1-on-1-webrtc\server.js
const express = require('express')
const app = express()
const http = require('http').createServer(app)
// static data
app.use('/', express.static(__dirname + '/public/'))
// TODO: Signaling
//start server listen 8080 port
http.listen(8080, () => {
console.log(`Server running in 8080`)
})
C:\...\1-on-1-webrtc\pubilc\index.html
(origin)
"hello"
(after)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<script src="https://cdn.socket.io/socket.io-3.0.5.js"></script>
</head>
<body>
<h1>"hello"</h1>
<script>
var socket = io();
</script>
</body>
</html>
I change Your code a little and here is my solution:
Firstly change your name of public folder to correct. Not "pubilc" only "public".
Folder & File Structure:
server.js :
const express = require("express");
const app = express();
const port = 8080;
// const http = require("http").createServer(app);
// static data
app.use("/", express.static(__dirname + "/public"));
//start server listen 8080 port
app.listen(port, () => {
console.log(`Server is listening at http://localhost:${port}`);
});
index.html (without any changes) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>111</title>
<script src="https://cdn.socket.io/socket.io-3.0.5.js"></script>
</head>
<body>
<h1>"hello"</h1>
<script>
var socket = io();
</script>
</body>
</html>
Output :
Tested with: express 4.17.2 node 16.13.0 Linux Ubuntu 20.04 and Win10
I created a static website and I use gulp for automation. Now, I copy also my html files to dist directory using gulp pages but when I checked that directory and open any html files, stylesheets and all other links are broken due to relative paths. Is there a way to change the paths for the stylesheets and images while copying html to dist directory?
gulpfile.js
"use strict";
const gulp = require("gulp");
const sass = require("gulp-sass");
const imagemin = require("gulp-imagemin");
const htmlmin = require("gulp-htmlmin");
const browserSync = require("browser-sync").create();
const sassPaths = ["./node_modules"];
function style() {
return gulp
.src("./app/scss/**/*.scss")
.pipe(sass({ includePaths: sassPaths, outputStyle: "compressed" }))
.pipe(gulp.dest("./app/dist/css"))
.pipe(browserSync.stream());
}
function images() {
return gulp
.src("./app/images/**/*")
.pipe(imagemin())
.pipe(gulp.dest("/app/dist/images"));
}
function pages() {
return gulp
.src(["./app/**/*html"])
.pipe(
htmlmin({
collapseWhitespace: true,
removeComments: true
})
)
.pipe(gulp.dest("./app/dist"));
}
function watch() {
browserSync.init({
server: {
baseDir: "./app"
}
});
gulp.watch("./app/scss/**/*.scss", style, images);
gulp.watch("./app/**/*.html").on("change", browserSync.reload);
}
exports.style = style;
exports.images = images;
exports.pages = pages;
exports.watch = watch;
I want to change the generated files inside dist directory from
<link rel="stylesheet" href="./dist/css/app.css">
to
<link rel="stylesheet" href="./css/app.css" />
Have a look at gulp-processhtml or a similar package like gulp-useref.
And then in your html file you would have something like:
<!-- build:css ./css/app.css -->
<link rel="stylesheet" href="./dist/css/app.css">
<!-- /build -->
that would change your link to <link rel="stylesheet" href="./css/app.css" />
const modifyHTMLlinks = require("gulp-processhtml"); // or try gulp-useref
function pages() {
return gulp
.src(["./app/**/*html"])
.pipe(modifyHTMLlinks())
.pipe(
htmlmin({
collapseWhitespace: true,
removeComments: true
})
)
.pipe(gulp.dest("./app/dist"));
}
I am making a electron application that launches an executable stored on my computer when run. If I run the exe by itself, it works correctly and loads all of the fonts. However, when run by the electron app, it opens, but non of the font files can be loaded. The exe is a compiled release project made in visual studio.
I tried putting the res folder into the same directory as index.html to no avail.
Code for index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<script>
var child = require('child_process').execFile;
var exePath = "C:\\Users\\name\\Documents\\Visual Studio 2015\\Projects\\Ten\\Release\\Ten.exe";
var parameters = ["test"];
child(exePath, parameters, function(err, data){
console.log(err);
console.log(data.toString());
})
</script>
</body>
</html>
Code for main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
Thanks!
Does your exe use a relative path to load the fonts? If so, either change the exe to be more flexible, or in your call to execFile() specify the optional 3rd arg to specify the desired working directory.
var child = require('child_process').execFile;
var exePath = "C:\\Users\\name\\Documents\\Visual Studio 2015\\Projects\\Ten\\Release";
var exe = exePath + "\\Ten.exe";
var parameters = ["test"];
var options = {cwd:exePath};
child(exePath, parameters, options, function(err, data){
console.log(err);
console.log(data.toString());
});
If that doesn't work, my guess would be some kind of permissions problem. Is your electron app running as a different user to when you test the exe?
GitHub Repository
Summary
After changing my folder structure to keep development and production separate I get a Uncaught SyntaxError: Unexpected token < error.
Note
When I upload my production folder contents via FTP, the site works fine. Only when local do I get the above stated error. Before changing the folder structure, my local server (gulp-connect) worked just fine.
Issue
I an encountering the following errors:
Uncaught SyntaxError: Unexpected token <
My application was working great and ready to launch. I had been working locally with a gulp-connect server. I wanted to create a gulp task that would minify code, copy/paste dependencies, compress image. My end goal would be to have a folder that contained only production ready files.
To do this I created the following folder structure:
Folder Structure
The first and biggest change was to copy/paste (using gulp) the node modules dependencies into appropriate folders. As these changed I updated my index.html to reflect to new locations of the scripts from the node_modules folder to /js.
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="images/HWA_Emblem.png">
<base href="/">
<meta charset="UTF-8">
<title>Halifax Wildlife Association</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/shim.min.js"></script>
<script src="js/lib/Reflect.js"></script>
<script src="js/lib/system.src.js"></script>
<script src="js/lib/zone.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app></my-app>
<script src="js/lib/jquery-3.1.1.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lib/format-google-calendar.js"></script>
</body>
</html>
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': '/js/lib/#angular',
'ng2-page-scroll': '/js/lib/ng2-page-scroll.umd.js',
'rxjs': '/js/lib/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
config.rb
I use compass to compile my SASS so I then updated this accordingly:
require 'compass/import-once/activate'
require 'breakpoint'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/builds/development"
css_dir = 'stylesheets'
sass_dir = 'sass'
images_dir = 'images'
javascripts_dir = 'javascripts'
sass_options = false
#tsconfig.json#
My TSConfig file had no changes
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
gulpfile.js
I am not done of this file just yet, it however does correctly make a production folder.
// Add requiements
var gulp = require ('gulp'),
gutil = require ('gulp-util'),
concat = require ('gulp-concat'),
browserify = require ('gulp-browserify'),
compass = require ('gulp-compass'),
connect = require ('gulp-connect');
sourcemaps = require ('gulp-sourcemaps');
typescript = require ('gulp-typescript');
tsConfig = require ('./tsconfig.json');
gulpif = require ('gulp-if');
uglify = require ('gulp-uglify');
var env,
htmlSources,
sassSource,
jsSources,
appSources,
imageSources,
tsSources,
depSources,
outputDir
env = process.env.NODE_ENV || 'development';
if (env==='development') {
outputDir = 'builds/development/';
} else{
outputDir = 'builds/production/';
}
//Setup path variables
htmlSources = [
'builds/development/partials/*.html',
'builds/development/index.html'
];
sassSources = [
'builds/development/components/sass/style.scss'
];
jsSources = [
'builds/development/components/scripts/*.js'
];
depSources = [
'js/lib'
];
tsSrc = [
'builds/development/components/typescript/*.ts'
];
imageSources= [
'builds/development/images/**/*.*'
];
gulp.task('CopyDep', function(){
gulp.src('node_modules/core-js/client/shim.min.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('node_modules/zone.js/dist/zone.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('node_modules/reflect-metadata/Reflect.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('node_modules/systemjs/dist/system.src.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/components/scripts/format-google-calendar.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/components/scripts/jquery-3.1.1.min.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/components/scripts/jquery-3.1.1.min.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/systemjs.config.js').pipe(gulpif(env === 'production', gulp.dest(outputDir)))
gulp.src('node_modules/#angular/**/*').pipe(gulp.dest(outputDir + 'js/lib/#angular'));
gulp.src('node_modules/ng2-page-scroll/bundles/ng2-page-scroll.umd.js').pipe(gulp.dest(outputDir + 'js/lib'));
gulp.src('node_modules/rxjs/**/*.*').pipe(gulp.dest(outputDir + 'js/lib/rxjs'));
});
//Combine Javascript Files
gulp.task('js', function(){
gulp.src(jsSources)
.pipe(concat('scripts.js'))
.pipe(browserify())
.pipe(gulp.dest(outputDir + 'js'))
.pipe(connect.reload())
});
//Process Typescript
gulp.task('typescript', function () {
return gulp
.src(tsSrc)
.pipe(sourcemaps.init())
.pipe(typescript(tsConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(outputDir + 'app'))
.pipe(connect.reload());
});
//Process SASS files
gulp.task('compass', function(){
gulp.src(sassSources)
.pipe(compass({
config_file: 'config.rb',
css: 'temp',
sass: 'builds/development/components/sass'
}))
.on('error', gutil.log)
.pipe(gulp.dest(outputDir + 'css'))
.pipe(connect.reload())
});
//Reload HTML files if change is recorded.
gulp.task('html', function(){
gulp.src(htmlSources[1])
.pipe(gulpif(env === 'production', gulp.dest(outputDir)))
gulp.src(htmlSources[0])
.pipe(gulpif(env === 'production', gulp.dest(outputDir + 'partials')))
.pipe(connect.reload());
});
// Watch all sources file directorys and run tasks if changes happen.
gulp.task('watch', function(){
gulp.watch(jsSources, ['js']);
gulp.watch(sassSources, ['compass']);
gulp.watch(htmlSources, ['html']);
gulp.watch(tsSrc, ['typescript']);
});
// copy images in production
gulp.task('images', function(){
gulp.src(imageSources)
.pipe(gulpif(env === 'production', gulp.dest(outputDir + 'images')))
});
// Start a server for project.
gulp.task('connect', function(){
connect.server({
root : '',
livereload : true,
fallback: 'builds/development/index.html'
});
});
// Run all tasks above by using default command "Gulp".
gulp.task('default', ['CopyDep', 'images', 'js', 'images', 'typescript', 'compass', 'html', 'watch', 'connect']);
I am new to webpack and I love the benefits of using require/import vs. adding multiple script tags in the index.html.
However, I wonder whether there is a way to slice a 13MB output file to chunks so I can have the benefits of the browser's cache like I had with the script-approach.
For instance:
bundle.react.components.js
bundle.utils.js
bundle.redux.reducers.js
That way the loading time of the app will be faster when I make a small change that only affects bundle.utils.js.
Cheers,
// your slicing gulp file
var gulp = require('gulp')
var webpackStream = require('webpack-stream')
var path = require('path')
var webpack = require('webpack')
gulp.task('slice', function () {
return gulp.src('')
.pipe(webpackStream({
entry: {
react_1st: ["react", "react-dom"],
utils_2nd: [
"fixed-data-table"
, "./class_1"
, "./class_2"
, "./constants" ],
remainder_3rd: "./render_component.js" // ReactDOM.render(your_component ...
},
output: {
path: path.join(__dirname, "js"),
filename: "bundle.[name].js",
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["remainder_3rd", "utils_2nd", "react_1st"],
minChunks: Infinity
}),
]
}))
.pipe(gulp.dest('./'))
})
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="bundle.react_1st.js"></script>
<script src="bundle.utils_2nd.js"></script>
<script src="bundle.remainder_3rd.js"></script>