gulp merge multiple JS into one - javascript

I have a task gulp dev that should merge a array of JS files into one in dist/js however I cant seem to get the gulp command to create the file dist/js, Can anyone see where I have gone wrong been at this 9 hrs now.
Thanks
Gulp file
gulp.task("dev", function () {
// set the dev config (cache in utils.js)
utils.setConfig({
env: "dev",
watch: true,
notify: true,
tasks: ["js", "css", "copy", "bower", "svg-sprite"]
});
// build with this config
utils.build();
});
then ...
task/js
var gulp = require("gulp"),
utils = require("./utils"),
config = utils.loadConfig(),
gulpif = require("gulp-if"),
fs = require("fs"),
uglify = require("gulp-uglify"),
sourcemaps = require("gulp-sourcemaps"),
browserify = require("browserify"),
shim = require("browserify-shim"),
through2 = require("through2"),
babelify = require("babelify"),
minify = require('gulp-minify'),
replaceName = require('gulp-replace-name');
// dev/default settings
utils.setTaskConfig("js", {
default: {
// Pass array instead of single file!
src: [
config.root + "/js/index.js",
config.root + "/js/owlCarousel.js",
config.root + "/js/search/search.js",
// Angular 1.x doesn't play well with CommonJS modules :(
config.root + "/js/search/angular-1.5.1.min.js",
config.root + "/js/search/angular-animate-1.5.1.min.js",
config.root + "/js/search/angular-sanitize-1.5.1.min.js"
],
dest: config.dest + "/js",
// js uglify options, to skip, set value to false or omit entirely
// otherwise, pass options object (can be empty {})
uglify: false,
// browserify options
browserify: {
debug: true // enable sourcemaps
}
},
prod: {
browserify: {},
// uglify javascript for production
uglify: {}
}
});
// register the watch
utils.registerWatcher("js", [
config.root + "/js/**/*.js",
config.root + "/js/**/*.jsx"
]);
/* compile application javascript */
gulp.task("js", function(){
var js = utils.loadTaskConfig("js");
// for browserify usage, see https://medium.com/#sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623
// ^^ we can't use vinyl-transform anymore because it breaks when trying to use b.transform()
// https://github.com/sogko/gulp-recipes/tree/master/browserify-vanilla
var browserifyIt = through2.obj(function (file, enc, callback){
// https://github.com/substack/node-browserify/issues/1044#issuecomment-72384131
var b = browserify(js.browserify || {}) // pass options
.add(file.path) // this file
.transform(babelify)
.transform(shim);
b.bundle(function(err, res){
if (err){
callback(err, null); // emit error so drano can do it's thang
}
else {
file.contents = res; // assumes file.contents is a Buffer
callback(null, file); // pass file along
}
});
});
return gulp.src(js.src)
.pipe(utils.drano())
.pipe(browserifyIt)
.pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file
.pipe(gulpif((js.uglify), uglify(js.uglify)))
.pipe(minify(({
ignoreFiles: ['*.min.js', 'search.js']
})))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(js.dest));
});
gulp.src([
'./dist/js/*.min.js',
'./dist/js/*-min.js',
'./dist/js/amcharts.js',
'./dist/js/amstock.js',
'./dist/js/table-childssorter.js',
'./dist/js/serial.js',
'./dist/js/vendor.js',
'./dist/js/jquery-3.1.1.js',
'./dist/js/jquery.tablesorter.js',
'./dist/js/search.js'
])
.pipe(replaceName(/\-min.js/g, '.js'))
.pipe(gulp.dest('./dist/minified/js'));

Related

Gulp rebuild parent js files when partials are modified

I have the following gulp task for my js files:
gulp.task("js", () => {
return gulp
.src([
src_js_folder + "*.js",
src_js_folder + "**/*.js" // Include partial js files, to trigger the build when there is a change in them
], { since: gulp.lastRun("js"), read: false }) // no need of reading file because browserify does.
.pipe(dependents())
.pipe(filter(['**'].concat( // filter partial js files (inside subdirectories)
readdirSync(src_js_folder, { withFileTypes: true }) // list all js files inside subdirectories
.filter(dirent => dirent.isDirectory())
.map(dirent => `!${src_js_folder.substring(2) + dirent.name}/**/*.js`)
)))
.pipe(plumber({errorHandler: reportError}))
.pipe(tap(function (file) {
logger.info('bundling ' + file.path);
// replace file contents with browserify's bundle stream
file.contents = browserify(file.path, {debug: true})
.bundle();
}))
.pipe(buffer()) // transform streaming contents into buffer contents (because gulp-sourcemaps does not support streaming contents)
.pipe(beautify.js({ indent_size: 2 }))
.pipe(gulp.dest(dist_folder + "js"))
.pipe(browserSync.stream());
});
And this watcher for browserSync:
gulp.watch([src_js_folder + '**/*.js'], gulp.series("dev")).on("change", browserSync.reload);
So what I did in my task is I included the partial js files in the src as well, and then filter them to not build them.
The problem I'm having is that when I update a parent js file that includes these partials gulp is rebuilding them, but when I change something in the partials, gulp doesn't build the parent js files that include these partials.
for example if I change the following file: src_js_folder + 'somefile.js', gulp successfully rebuild the file:
[16:27:34] Starting 'js'...
[16:27:34] bundling ...\www-src\assets\scripts\global.V3-1.js
[Browsersync] 1 file changed (global.V3-1.js)
[16:27:34] Finished 'js' after 597 ms
But when I change something in the partial js file, for example: src_js_folder + '/subdir/_somePartialFile.js', gulp does nothing:
[16:29:21] Starting 'js'...
[16:29:21] Finished 'js' after 10 ms
The logic I followed in my task is the same as my sass task:
gulp.task("sass", () => {
return (
gulp.src([
src_sass_folder + "*.scss",
src_sass_folder + "**/*.scss"
], {
since: gulp.lastRun("sass"),
})
.pipe(dependents())
.pipe(filter(['**'].concat( // filter partial SASS files (inside subdirectories) this is used to not build the partial SASS files
readdirSync(src_sass_folder, { withFileTypes: true }) // selector for all partial SASS files
.filter(dirent => dirent.isDirectory())
.map(dirent => `!${src_sass_folder.substring(2) + dirent.name}/**/*.scss`)
)))
.pipe(debug({title: "sass-debug:", showCount: false}))
.pipe(sourcemaps.init())
.pipe(plumber({errorHandler: reportError}))
.pipe(sass({ fiber: Fiber })) // call asynchronous importers from the synchronous code path (for using Dart Sass)
.pipe(autoprefixer())
.pipe(minifyCss({debug: true}, (details) => {
console.log(`Original size: ${details.stats.originalSize}, Minified size: ${details.stats.minifiedSize}, Efficiency: ${details.stats.efficiency}`);
}))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(dist_folder + "Content"), {overwrite: true})
.pipe(browserSync.stream({match: '**/*.css'}))
);
});
gulp.watch([src_sass_folder + '**/*.scss'], gulp.series("sass"));
This is successfully working when I change something in the partial sass files, because when a partial sass file changes, gulp only builds the sass files that include them.
How can I make my js task work properly?
Edit:
My parent js files are looking like this:
bundle = require('./subdir/_partial1.js');
bundle = require('./subdir/_partial2.js');
bundle = require('./subdir/_partial3.js');
I was able to use gulp-dependents for setting up JS(ES6) incremental build.
For that I had to write the regex for extracting the file paths from the import statements and fortunately I found a GitHub Gist which had the required regex. Here is the gulp-dependents config for parsing JS import statements:
const jsDependentsConfig = {
".js":{
postfixes: ['.js'],
parserSteps: [
/import(?:["'\s]*(?:[\w*${}\n\r\t, ]+)from\s*)?["'\s]*(.*[#\w_-]+)["'\s].*;?$/gm,
function(path){
// Remove file extension, if any
path = path.replace(/\.js$/,'');
// Local packages
paths = [`${path}/index.js`,`${path}.js`];
return paths;
},
]
},
};
Once this was implemented, using gulp-dependents was fairly straightforward.
Final code:
const { src, dest, lastRun } = require('gulp');
const dependents = require('gulp-dependents');
const filter = require('gulp-filter');
const jsDependentsConfig = {
".js":{
postfixes: ['.js'],
parserSteps: [
/import(?:["'\s]*(?:[\w*${}\n\r\t, ]+)from\s*)?["'\s]*(.*[#\w_-]+)["'\s].*;?$/gm,
function(path){
// Remove file extension, if any
path = path.replace(/\.js$/,'');
// Local packages
paths = [`${path}/index.js`,`${path}.js`];
return paths;
},
]
},
};
function scripts(){
// Ref: https://stackoverflow.com/a/35413106
const filterPartials = filter([
`**/src/js/**/!(_)*.js`, // select all js files
`!**/src/js/**/_*/`, // exclude all folder starting with _
`!**/src/js/**/_*/**/*` //exclude files/subfolders in folders starting with '_'
]);
return src('src/js/**/*.js',{ since: lastRun(scripts) })
.pipe(gulpIf(!Config.production,
dependents(jsDependentsConfig)
))
.pipe(filterPartials)
// other pipes
.pipe(dest('assets/js'))
;
}
Is dependents gulp-dependents?
By default, gulp-dependents do not support .js files.
When 'partial sass file' is changed, gulp-dependents add 'parent sass file' by dependencyMap cached before. Then filter remove the 'partial sass file'. The 'parent sass file' is passed to gulp-sass.
When 'partial js file' is changed, gulp-dependents do not add any file. Then filter remove the 'partial js file'. No file last.
Cache dependencies by browserify pipeline.
function DependentsJS () {
const fileDepMap = new Map()
return {
browserify (filePath, opts) {
for (let deps of fileDepMap) {
deps[1].delete(filePath)
}
const b = browserify(filePath, opts)
b.pipeline.on('file', function (file) {
if (!fileDepMap.has(file)) {
fileDepMap.set(file, new Set())
}
fileDepMap.get(file).add(filePath)
})
return b
},
plugin: () => through.obj(function (file, encoding, callback) {
this.push(file)
if (fileDepMap.has(file.path)) {
fileDepMap.get(file.path).forEach(pFile => {
this.push({
cwd: file.cwd,
path: pFile
})
});
}
callback();
}, function (callback) {
callback()
})
}
}
USE:
const dependentsJS = DependentsJS()
gulp.task("js", () => {
return gulp
.src([
src_js_folder + "*.js",
src_js_folder + "**/*.js"
], { since: gulp.lastRun("js"), read: false })
// .pipe(dependents())
.pipe(dependentsJS.plugin()) // <<< USE `dependentsJS.plugin()`
.pipe(filter(['**'].concat(
readdirSync(src_js_folder, { withFileTypes: true })
.filter(dirent => dirent.isDirectory())
.map(dirent => `!${src_js_folder.substring(2) + dirent.name}/**/*.js`)
)))
.pipe(plumber({errorHandler: reportError}))
.pipe(tap(function (file) {
logger.info('bundling ' + file.path);
// file.contents = browserify(file.path, {debug: true})
file.contents = dependentsJS.browserify(file.path, {debug: true}) // <<< USE `dependentsJS.browserify`
.bundle();
}))
.pipe(buffer())
.pipe(beautify.js({ indent_size: 2 }))
.pipe(gulp.dest(dist_folder + "js"))
.pipe(browserSync.stream());
});

How to fix, ENOENT error: no such file or directory when the "fonts" task mentioned below in the gulpfile.js starts

Following is the gulpfile.js which i have. Am getting ENOENT error: no such file or directory, when the "fonts" task starts, while running "gulp build-qa" command. Howeve, The build is successful every alternate time but not every time consistently. How to fix this issue ? I have made sure that every task has return, even though it is not working.
var gulp = require('gulp'),
del = require('del'),
pump = require('pump'),
flatten = require('gulp-flatten'),
usemin = require('gulp-usemin'),
htmlmin = require('gulp-htmlmin'),
cssmin = require('gulp-clean-css'),
uglifyjs = require('gulp-uglify'),
stripdebug = require('gulp-strip-debug'),
ngannotate = require('gulp-ng-annotate'),
rev = require('gulp-rev'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps'),
connect = require('gulp-connect');
var ENV = process.env.NODE_ENV || 'dev',
APP_DIR = 'app',
BUILD_DIR = 'build',
SRC_DIR = 'source',
ZIP_DIR = 'packed';
gulp.task('clean', function () {
return del(
[BUILD_DIR + '/**', ZIP_DIR + '/**'],
{ dryRun: false })
.then(
// paths => { console.log('Files and folders that would be deleted:\n', paths.join('\n'));}
);
});
gulp.task('build-qa',['clean','fonts','images','partials','usemin-qa'], function(){});
/* Html processing, minifying and copying to build folder */
gulp.task('partials', function () {
return gulp.src(['**/*.html','!index.html'], {cwd: APP_DIR})
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest(BUILD_DIR));
});
/* Images copying to build folder */
gulp.task('images', function () {
return gulp.src('**/*.{jpg,png,gif,svg}')
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/images'));
});
/* Find all font type files in 'fonts' folders and move to fonts build folder with flattened structure */
gulp.task('fonts', function () {
return gulp.src('**/fonts/*.{ttf,woff,eot,svg}')
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/fonts'));
});
gulp.task('usemin-qa', function () {
return gulp.src('app/index.html')
.pipe(usemin({
// pipelines are named in the HTML, like js_lib and js_app below; html is the src file
html: [htmlmin({ collapseWhitespace: true, quotes: true, empty: true, spare: true, loose: true })],
css_lib: [
cssmin(),
'concat',
rev()
],
css: [
cssmin(),
'concat',
rev()
],
js_lib: [
ngannotate({remove: false, add: true}),
uglifyjs(),
rev()
],
js_app: [
sourcemaps.init(),
'concat',
ngannotate({remove: true, add: true}),
uglifyjs(),
rev()
]
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(BUILD_DIR))
});
ENOENT errors in gulp are almost always caused by some kind of race condition.
The first problem is that all your tasks are sourcing files not just from your source folders. For example '**/fonts/*.{ttf,woff,eot,svg}' selects font files from anywhere in your project including your BUILD_DIR. You need to exclude BUILD_DIR in all your tasks:
gulp.task('fonts', function () {
return gulp.src(['**/fonts/*.{ttf,woff,eot,svg}',
'!'+BUILD_DIR+'/**'])
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/fonts'));
});
The next problem is this line:
gulp.task('build-qa',['clean','fonts','images','partials','usemin-qa'], function(){});
This doesn't do what you think it does. All those tasks aren't executed in order, they're all executed at the same time. That means your clean task is deleting files in BUILD_DIR while your other tasks are busy copying files into that same directory.
You have two options:
(1) Place a dependency hint on all the other tasks. For example your fonts task would have to look like this:
gulp.task('fonts', ['clean'], function () {
return gulp.src(['**/fonts/*.{ttf,woff,eot,svg}',
'!' + BUILD_DIR + '/**'])
.pipe(flatten())
.pipe(gulp.dest(BUILD_DIR+'/fonts'));
});
This makes sure that all the other tasks run only after the clean task has finished.
(2) Use run-sequence in your build-qa task:
var runSequence = require('run-sequence');
gulp.task('build-qa', function(cb) {
runSequence('clean',['fonts','images','partials','usemin-qa'], cb);
});
This runs the clean task first and then all the other tasks in parallel.

Gulp.js browser-sync not reloading my browser

Gulp browser-sync is not reloading my browser. When I hit save on my project it builds everything fine. My browser blinks and says "Connected to Browser-sync" on the upper right hand corner. It does not load the changes though. When I manually hit refresh, on chrome, it will load the changes. I've been up and down the gulp file and can find nothing wrong. Any advice?
Gulp.js file:
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');
// Check for --production flag
var isProduction = !!(argv.production);
// Port to use for the development server.
var PORT = 8000;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{img,js,scss}/**/*'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.*.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/**/!(app).js',
'src/assets/js/app.js'
]
};
// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});
// Browser Sync wrapper task
// allows for proper injection of css files
gulp.task('reload', function(cb) {
browser.reload();
cb();
});
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});
// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'));
});
gulp.task('pages:reset', function(cb) {
panini.refresh();
gulp.run('pages', cb);
});
gulp.task('styleguide', function(cb) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, cb);
});
// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/**/*.html'],
ignore: [
new RegExp('^meta\..*'),
new RegExp('^\.is-.*')
]
}));
var minifycss = $.if(isProduction, $.minifyCss());
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({stream: true}));
});
// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'));
});
// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));
return gulp.src('src/assets/img/**/*')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'));
});
// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});
// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy', 'reload']);
gulp.watch(['src/pages/**/*.html'], ['pages', 'reload']);
gulp.watch(['src/{layouts,partials}/**/*.html'], ['pages:reset', 'reload']);
gulp.watch(['src/assets/scss/**/*.scss'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript', 'reload']);
gulp.watch(['src/assets/img/**/*'], ['images', 'reload']);
gulp.watch(['src/styleguide/**'], ['styleguide', 'reload']);
});
Thanks you - Adolfo
I was helped with the fix at zurb/foundation-sites on github by gakimball. There were issues with the gulp.js file for foundation 6.1.1. Github issue page: https://github.com/zurb/panini/issues/10#issuecomment-172692241 explains more. Replacing my gulp.js file with the following code fixed the issue.
New gulp.js:
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browser = require('browser-sync');
var gulp = require('gulp');
var panini = require('panini');
var rimraf = require('rimraf');
var sequence = require('run-sequence');
var sherpa = require('style-sherpa');
// Check for --production flag
var isProduction = !!(argv.production);
// Port to use for the development server.
var PORT = 8000;
// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
// File paths to various assets are defined here.
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{img,js,scss}/**/*'
],
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
javascript: [
'bower_components/jquery/dist/jquery.js',
'bower_components/what-input/what-input.js',
'bower_components/foundation-sites/js/foundation.core.js',
'bower_components/foundation-sites/js/foundation.util.*.js',
// Paths to individual JS components defined below
'bower_components/foundation-sites/js/foundation.abide.js',
'bower_components/foundation-sites/js/foundation.accordion.js',
'bower_components/foundation-sites/js/foundation.accordionMenu.js',
'bower_components/foundation-sites/js/foundation.drilldown.js',
'bower_components/foundation-sites/js/foundation.dropdown.js',
'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
'bower_components/foundation-sites/js/foundation.equalizer.js',
'bower_components/foundation-sites/js/foundation.interchange.js',
'bower_components/foundation-sites/js/foundation.magellan.js',
'bower_components/foundation-sites/js/foundation.offcanvas.js',
'bower_components/foundation-sites/js/foundation.orbit.js',
'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
'bower_components/foundation-sites/js/foundation.reveal.js',
'bower_components/foundation-sites/js/foundation.slider.js',
'bower_components/foundation-sites/js/foundation.sticky.js',
'bower_components/foundation-sites/js/foundation.tabs.js',
'bower_components/foundation-sites/js/foundation.toggler.js',
'bower_components/foundation-sites/js/foundation.tooltip.js',
'src/assets/js/**/!(app).js',
'src/assets/js/app.js'
]
};
// Delete the "dist" folder
// This happens every time a build starts
gulp.task('clean', function(done) {
rimraf('dist', done);
});
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
gulp.task('copy', function() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest('dist/assets'));
});
// Copy page templates into finished HTML files
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest('dist'))
.on('finish', browser.reload);
});
gulp.task('pages:reset', function(done) {
panini.refresh();
gulp.run('pages');
done();
});
gulp.task('styleguide', function(done) {
sherpa('src/styleguide/index.md', {
output: 'dist/styleguide.html',
template: 'src/styleguide/template.html'
}, function() {
browser.reload;
done();
});
});
// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
var uncss = $.if(isProduction, $.uncss({
html: ['src/**/*.html'],
ignore: [
new RegExp('^meta\..*'),
new RegExp('^\.is-.*')
]
}));
var minifycss = $.if(isProduction, $.minifyCss());
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))
.pipe(uncss)
.pipe(minifycss)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/css'))
.pipe(browser.reload({ stream: true }));
});
// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});
// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
var imagemin = $.if(isProduction, $.imagemin({
progressive: true
}));
return gulp.src('src/assets/img/**/*')
.pipe(imagemin)
.pipe(gulp.dest('dist/assets/img'))
.on('finish', browser.reload);
});
// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});
// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
browser.init({
server: 'dist', port: PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
Thanks to the code above browser-sync is working again - Thanks gakimball!

Gulp fails with cryptic error message

When I run gulp to generate the dist files, I get some warnings followed by a cryptic error message which looks like this
> ⚠ 22 warnings
>
> [01:54:54] 'jshint' errored after 3.49 s [01:54:54] Error in plugin
> 'gulp-jshint' Message:
> JSHint failed for: app/elements/bronze-auth/bronze-auth.html, app/elements/bronze-changepwd/bronze-changepwd.html,
> app/elements/bronze-list/bronze-list-item.html,
> app/elements/bronze-list/bronze-list-new-item.html,
> app/elements/bronze-list/bronze-list.html,
> app/elements/bronze-lists/bronze-lists.html,
> app/elements/bronze-main/bronze-main.html,
> app/elements/bronze-share/bronze-share-add-user.html,
> app/elements/bronze-share/bronze-share-item.html,
> app/elements/bronze-share/bronze-share.html [01:54:54] 'default'
> errored after 5.41 s [01:54:54] Error in plugin 'run-sequence'
> Message:
> An error occured in task 'jshint'. [01:54:54] images all files 27.16 kB [01:54:54] Finished 'images' after 3.33 s [01:54:54] html all files 129.9 kB [01:54:54] Finished 'html' after 3.12 s
Because the error is so cryptic, I have no idea how to go about fixing it.
My gulpfile.js is reproduced below :
'use strict';
// Include Gulp & tools we'll use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var merge = require('merge-stream');
var path = require('path');
var fs = require('fs');
var glob = require('glob-all');
var historyApiFallback = require('connect-history-api-fallback');
var packageJson = require('./package.json');
var crypto = require('crypto');
// var ghPages = require('gulp-gh-pages');
var AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
];
var DIST = 'dist';
var dist = function(subpath) {
return !subpath ? DIST : path.join(DIST, subpath);
};
var styleTask = function(stylesPath, srcs) {
return gulp.src(srcs.map(function(src) {
return path.join('app', stylesPath, src);
}))
.pipe($.changed(stylesPath, {extension: '.css'}))
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('.tmp/' + stylesPath))
.pipe($.minifyCss())
.pipe(gulp.dest(dist(stylesPath)))
.pipe($.size({title: stylesPath}));
};
var imageOptimizeTask = function(src, dest) {
return gulp.src(src)
.pipe($.imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest(dest))
.pipe($.size({title: 'images'}));
};
var optimizeHtmlTask = function(src, dest) {
var assets = $.useref.assets({
searchPath: ['.tmp', 'app', dist()]
});
return gulp.src(src)
// Replace path for vulcanized assets
.pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
.pipe(assets)
// Concatenate and minify JavaScript
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
// Concatenate and minify styles
// In case you are still using useref build blocks
.pipe($.if('*.css', $.minifyCss()))
.pipe(assets.restore())
.pipe($.useref())
// Minify any HTML
.pipe($.if('*.html', $.minifyHtml({
quotes: true,
empty: true,
spare: true
})))
// Output files
.pipe(gulp.dest(dest))
.pipe($.size({
title: 'html'
}));
};
// Compile and automatically prefix stylesheets
gulp.task('styles', function() {
return styleTask('styles', ['**/*.css']);
});
gulp.task('elements', function() {
return styleTask('elements', ['**/*.css']);
});
// Lint JavaScript
gulp.task('lint', function() {
return gulp.src([
'app/scripts/**/*.js',
'app/elements/**/*.js',
'app/elements/**/*.html',
'gulpfile.js'
])
.pipe(reload({
stream: true,
once: true
}))
// JSCS has not yet a extract option
.pipe($.if('*.html', $.htmlExtract()))
.pipe($.jshint())
.pipe($.jscs())
.pipe($.jscsStylish.combineWithHintResults())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
// Optimize images
gulp.task('images', function() {
return imageOptimizeTask('app/images/**/*', dist('images'));
});
// Copy all files at the root level (app)
gulp.task('copy', function() {
var app = gulp.src([
'app/*',
'!app/test',
'!app/cache-config.json'
], {
dot: true
}).pipe(gulp.dest(dist()));
var bower = gulp.src([
'bower_components/**/*'
]).pipe(gulp.dest(dist('bower_components')));
var elements = gulp.src(['app/elements/**/*.html',
'app/elements/**/*.css',
'app/elements/**/*.js'
])
.pipe(gulp.dest(dist('elements')));
var swBootstrap = gulp.src(['bower_components/platinum-sw/bootstrap/*.js'])
.pipe(gulp.dest(dist('elements/bootstrap')));
var swToolbox = gulp.src(['bower_components/sw-toolbox/*.js'])
.pipe(gulp.dest(dist('sw-toolbox')));
var vulcanized = gulp.src(['app/elements/elements.html'])
.pipe($.rename('elements.vulcanized.html'))
.pipe(gulp.dest(dist('elements')));
return merge(app, bower, elements, vulcanized, swBootstrap, swToolbox)
.pipe($.size({
title: 'copy'
}));
});
// Copy web fonts to dist
gulp.task('fonts', function() {
return gulp.src(['app/fonts/**'])
.pipe(gulp.dest(dist('fonts')))
.pipe($.size({
title: 'fonts'
}));
});
// Scan your HTML for assets & optimize them
gulp.task('html', function() {
return optimizeHtmlTask(
['app/**/*.html', '!app/{elements,test}/**/*.html'],
dist());
});
// Vulcanize granular configuration
gulp.task('vulcanize', function() {
var DEST_DIR = dist('elements');
return gulp.src(dist('elements/elements.vulcanized.html'))
.pipe($.vulcanize({
stripComments: true,
inlineCss: true,
inlineScripts: true
}))
.pipe(gulp.dest(DEST_DIR))
.pipe($.size({title: 'vulcanize'}));
});
// Generate config data for the <sw-precache-cache> element.
// This include a list of files that should be precached, as well as a (hopefully unique) cache
// id that ensure that multiple PSK projects don't share the same Cache Storage.
// This task does not run by default, but if you are interested in using service worker caching
// in your project, please enable it within the 'default' task.
// See https://github.com/PolymerElements/polymer-starter-kit#enable-service-worker-support
// for more context.
gulp.task('cache-config', function(callback) {
var dir = dist();
var config = {
cacheId: packageJson.name || path.basename(__dirname),
disabled: false
};
glob([
'index.html',
'./',
'bower_components/webcomponentsjs/webcomponents-lite.min.js',
'{elements,scripts,styles}/**/*.*'],
{cwd: dir}, function(error, files) {
if (error) {
callback(error);
} else {
config.precache = files;
var md5 = crypto.createHash('md5');
md5.update(JSON.stringify(config.precache));
config.precacheFingerprint = md5.digest('hex');
var configPath = path.join(dir, 'cache-config.json');
fs.writeFile(configPath, JSON.stringify(config), callback);
}
});
});
// Clean output directory
gulp.task('clean', function() {
return del(['.tmp', dist()]);
});
// Watch files for changes & reload
gulp.task('serve', ['lint', 'styles', 'elements', 'images'], function() {
browserSync({
port: 5000,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: {
baseDir: ['.tmp', 'app'],
middleware: [historyApiFallback()],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint']);
gulp.watch(['app/images/**/*'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function() {
browserSync({
port: 5001,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: dist(),
middleware: [historyApiFallback()]
});
});
// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
['copy', 'styles'],
'elements',
['lint', 'images', 'fonts', 'html'],
'vulcanize', // 'cache-config',
cb);
});
// Build then deploy to GitHub pages gh-pages branch
gulp.task('build-deploy-gh-pages', function(cb) {
runSequence(
'default',
'deploy-gh-pages',
cb);
});
// Deploy to GitHub pages gh-pages branch
gulp.task('deploy-gh-pages', function() {
return gulp.src(dist('**/*'))
// Check if running task from Travis Cl, if so run using GH_TOKEN
// otherwise run using ghPages defaults.
.pipe($.if(process.env.TRAVIS === 'true', $.ghPages({
remoteUrl: 'https://$GH_TOKEN#github.com/polymerelements/polymer-starter-kit.git',
silent: true,
branch: 'gh-pages'
}), $.ghPages()));
});
// Load tasks for web-component-tester
// Adds tasks for `gulp test:local` and `gulp test:remote`
require('web-component-tester').gulp.init(gulp);
// Load custom tasks from the `tasks` directory
try {
require('require-dir')('tasks');
} catch (err) {}

gulp browserify reactify task is quite slow

I am using Gulp as my task runner and browserify to bundle my CommonJs modules.
I have noticed that running my browserify task is quite slow, it takes around 2 - 3 seconds, and all I have is React and a few very small components I have built for development.
Is there a way to speed up the task, or do I have any noticeable problems in my task?
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./main.js'], // Only need initial file
transform: [reactify], // Convert JSX to javascript
debug: true, cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // On update When any files updates
var updateStart = Date.now();
watcher.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
console.log('Updated ', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create initial bundle when starting the task
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
});
I am using Browserify, Watchify, Reactify and Vinyl Source Stream as well as a few other unrelated modules.
var browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify'),
source = require('vinyl-source-stream');
Thanks
See fast browserify builds with watchify. Note that the only thing passed to browserify is the main entry point, and watchify's config.
The transforms are added to the watchify wrapper.
code from article pasted verbatim
var gulp = require('gulp');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var watchify = require('watchify');
var browserify = require('browserify');
var bundler = watchify(browserify('./src/index.js', watchify.args));
// add any other browserify options or transforms here
bundler.transform('brfs');
gulp.task('js', bundle); // so you can run `gulp js` to build the file
bundler.on('update', bundle); // on any dep update, runs the bundler
function bundle() {
return bundler.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you dont want sourcemaps
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
.pipe(sourcemaps.write('./')) // writes .map file
//
.pipe(gulp.dest('./dist'));
}
You have to use watchify and enable its cache. Take a look at :
https://www.codementor.io/reactjs/tutorial/react-js-browserify-workflow-part-2
and for more optimisation when building source-map you could do that :
cd node_modules/browserify && npm i substack/browser-pack#sm-fast
this would safe you half of time
part of my gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');
var path = {
OUT : 'build.js',
DEST2 : '/home/apache/www-modules/admimail/se/se',
DEST_BUILD : 'build',
DEST_DEV : 'dev',
ENTRY_POINT : './src/js/main.jsx'
};
gulp.task('watch', [], function() {
var bundler = browserify({
entries : [ path.ENTRY_POINT ],
extensions : [ ".js", ".jsx" ],
transform : [ 'reactify' ],
debug : true,
fullPaths : true,
cache : {}, // <---- here is important things for optimization
packageCache : {} // <---- and here
});
bundler.plugin(watchify, {
// delay: 100,
// ignoreWatch: ['**/node_modules/**'],
// poll: false
});
var rebundle = function() {
var startDate = new Date();
console.log('Update start at ' + startDate.toLocaleString());
return bundler.bundle(function(err, buf){
if (err){
console.log(err.toString());
} else {
console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms');
}
})
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST2 + '/' + path.DEST_DEV))
;
};
bundler.on('update', rebundle);
return rebundle();
});
gulp.task('default', [ 'watch' ]);
Many thanks to #PHaroZ for that answer. I had to modify a little bit that code for my needs though. I am working with ReactJS on Symfony2 framework and all my builds were taking 7s-21s!!! Crazy.. So that's what I have now:
var path = {
OUT : 'app.js',
DEST_BUILD : './src/MyBundle/Resources/js/dist',
ENTRY_POINT : './src/MyBundle/Resources/js/src/app.js'
};
gulp.task('watch', [], function() {
var bundler = browserify({
entries : [ path.ENTRY_POINT ],
extensions : [ ".js", ".jsx" ],
// transform : [ 'reactify' ],
debug : true,
fullPaths : true,
cache : {}, // <---- here is important things for optimization
packageCache : {} // <---- and here
}).transform("babelify", {presets: ["es2015", "react"]});
bundler.plugin(watchify, {
// delay: 100,
// ignoreWatch: ['**/node_modules/**'],
// poll: false
});
var rebundle = function() {
var startDate = new Date();
console.log('Update start at ' + startDate.toLocaleString());
return bundler.bundle(function(err, buf){
if (err){
console.log(err.toString());
} else {
console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms');
}
})
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_BUILD))
;
};
bundler.on('update', rebundle);
return rebundle();
});
Now first compile takes around 20s and each time I update my file it takes around 800ms. It's just enough time to switch from IDE to my browser.

Categories

Resources