gulp-usemin multiple html files - javascript

I made multiple html files in my repository für different views of my site:
index.html
news.html
page.html
But my gulp build task only build one of the files not all.
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [minifyHtml({collapseWhitespace: true})]
}))
.pipe(gulp.dest(distPath));
return stream;
});
Has anybody an idea how I can fix it?
Thanks.
My full gulpfile.js
////////////////////
// Modules
////////////////////
var gulp = require('gulp'),
sass = require('gulp-sass'),
sassLint = require('gulp-sass-lint'),
jsHint = require('gulp-jshint'),
minifyJs = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
minifyHtml = require('gulp-htmlmin'),
minifyImages = require('gulp-imagemin'),
useMin = require('gulp-usemin'),
del = require('del'),
browserSync = require('browser-sync').create();
////////////////////
// Constants
////////////////////
const distPath = './dist';
////////////////////
// Tasks
////////////////////
// Sass
gulp.task('sass', function() {
gulp.src('./src/sass/**/*.scss')
.pipe(sassLint({
options: {
formatter: 'stylish',
configFile: './.sass-lint.yml'
},
}))
.pipe(sassLint.format())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./src/css'))
});
// Check JavaScripts
gulp.task('scripts-check', function() {
gulp.src('src/js/**/*.js')
.pipe(jsHint())
.pipe(jsHint.reporter('jshint-stylish'))
});
// Browsersync
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: './src/'
},
notify: false
});
});
// Watch
gulp.task('watch', function() {
gulp.watch('./src/js/**/*.js', ['scripts-check']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch(['./src/*.html', './src/css/*.css', './src/js/*.js']).on('change', browserSync.reload);
});
// Serve
gulp.task('serve', ['sass', 'scripts-check', 'browser-sync', 'watch']);
////////////////////
// Build Tasks
////////////////////
gulp.task('build:cleanfolder', function() {
return del(distPath).then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('build:copyfiles', ['build:cleanfolder'], function() {
var stream = gulp.src([
'src/**',
])
.pipe(gulp.dest(distPath));
return stream;
});
gulp.task('build:cleanfiles', ['build:copyfiles'], function() {
return del([
distPath + '/**/*.html',
distPath + '/sass',
distPath + '/css',
distPath + '/js',
distPath + '/images',
distPath + '/bower_components'
])
.then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [ function(){ return minifyHtml({collapseWhitespace: true});} ]
}))
.pipe(gulp.dest(distPath));
return stream;
});
gulp.task('build:minify-images', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/images/**/*.{png,gif,jpg,svg}')
.pipe(minifyImages())
.pipe(gulp.dest(distPath + '/images'));
return stream;
});
gulp.task('build:sass', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest(distPath + '/css'))
return stream;
});
gulp.task('build:serve', function() {
browserSync.init({
server: {
baseDir: distPath
},
notify: false
});
});
gulp.task('build', ['build:sass', 'build:usemin', 'build:minify-images']);

As per the documentation
If you need to call the same pipeline twice, you need to define each task as a function that returns the stream object that should be used.
Therefore:
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [ function(){ return minifyHtml({collapseWhitespace: true});} ]
}))
.pipe(gulp.dest(distPath));
return stream;
});

Related

Gulp watch task with Browsersync with Jekyll does not propagate modified content

When calling gulp the site and its assets are generated correctly once. The watch tasks start, but they never register new changes nor refresh the browser with Browsersync.
My goal is to have a full automation in the build process. For example, if _config.yml changes Jekyll will rebuild itself. Same idea applies to every file.
What I have tried so far:
Creating separate gulp.watch tasks for build:scripts, build:styles, build:images and build:jekyll.
Calling .on('change', browserSync.reload) on every separate gulp.watch task
Creating .pipe(browserSync.reload({stream: true})) in build:styles, build:images, build:scripts and build:jekyll
Here are the contents of gulpfile.js:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream());
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand))
browserSync.reload();
callback();
});
gulp.task('clean', function() {
return del(['_site', 'assets']);
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['build']).on('change', browserSync.reload);
});
gulp.task('default', ['watch']);
Why would Browsersync and Jekyll register the changes correctly?
I have managed to get Browsersync see all the changes in the needed files and reload browser with the following gulpfile.js tasks:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('clean', function() {
return del(['_site', '.publish', 'assets']);
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'));
});
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'));
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand));
callback();
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('rebuild', ['build'], function(){
browserSync.reload();
});
gulp.task('default', ['build'], function() {
// maybe important (injectChanges: true)
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['rebuild']);
});

Browsersync only reloads on html change

I am new to using gulp and browsersync. I am attempting to have it so whenever I make a change in any of my files: css, js, or html the live preview will refresh and show me the changes. I have made tasks that all work when they are called but once I run my browserSync it only refreshes on my index.html changes.
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
htmlclean = require('gulp-htmlclean'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
dist: 'dist/'
};
//image processing
gulp.task('images', function(){
var out = folder.dist + 'images/';
return gulp.src(folder.src + 'images/**/*')
.pipe(newer(out))
.pipe(imagemin({ optimizationLevel: 5}))
.pipe(gulp.dest(out));
});
//HTML processing
gulp.task('html', ['images'], function(){
var
out = folder.dist + 'html/',
page = gulp.src(folder.src + 'html/**/*')
.pipe(newer(out));
//minify production code
if(!devBuild){
page = page.pipe(htmlclean());
}
return page.pipe(gulp.dest(out))
.pipe(browserSync.stream());
});
// JS processing
gulp.task('js', function(){
var out = folder.dist + 'scripts/';
return gulp.src(folder.src + 'scripts/**/*')
.pipe(newer(out))
.pipe(uglify())
.pipe(gulp.dest(out))
.pipe(browserSync.stream());
});
//CSS processing
gulp.task('css', ['images'], function(){
var postCssOpts = [
assets({ loadPaths: ['images/'] }),
autoprefixer({ browsers: ['last 2 versions', '>2%'] }),
mqpacker
];
if(!devBuild) {
postCssOpts.push(cssnano);
}
return gulp.src(folder.src + 'styles/scss/main.scss')
.pipe(sass({
outputStyle: 'nested',
imagePath: 'images/',
precision: 3,
errLogToConsole: true
}))
.pipe(postcss(postCssOpts))
.pipe(gulp.dest(folder.dist + 'styles/'))
.pipe(browserSync.stream());
});
gulp.task('run', ['html', 'css', 'js']);
// watch for changes
gulp.task('watch',['browserSync', 'css'], function() {
// image changes
gulp.watch(folder.src + 'images/**/*', ['images']);
// html changes
gulp.watch(folder.src + 'html/**/*', ['html']);
// javascript changes
gulp.watch(folder.src + 'js/**/*', ['js']);
// css changes
gulp.watch(folder.src + 'css/scss/**/*', ['css']);
});
gulp.task('default', ['browserSync','run', 'watch'])
gulp.task('browserSync', function(){
browserSync.init({
server:{
baseDir:'dist',
directory: true
}
})
});

Why is gulp complaining about Maximum call stack size exceeded?

I am writting a gulp tasks where I take several js file , concat them , minify those.. same with scss into css etc ...normal stuffs
And, it is for Drupal 8
Here is my gulpfile. However on running this, I keep on getting the following error:
[10:00:58] Starting 'scripts'...
events.js:160
throw er; // Unhandled 'error' event
^
RangeError: Maximum call stack size exceeded
at Object.TreeWalker._visit (eval at <anonymous> (/Applications/MAMP/htdocs/novaent/node_modules/uglify-js/tools/node.js:1:0), <anonymous>:1255:21)
'use strict';
And below is my gulp file
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
// sassOptions are optional but things like sourceComments (line_comments) can be pretty handy.
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// javaScripts
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('index.js'))
.pipe(gulp.dest(config.js.dest)) // outputs *.js without min
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(config.js.dest)) // outputs *.js.min
.pipe(notify({message: 'Rebuild all custom scripts'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);
I think I have solved it as below
'use strict';
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
var uglifyOptions = {
preserveComments: 'license',
warnings: 'true'
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// Concat all js files into one index.min.js file
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('./js/index.js'))
.pipe(gulp.dest('./js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify(uglifyOptions))
.pipe(gulp.dest('./assets/dist/'))
.pipe(notify({message: 'Rebuild all custom scripts. Please refresh your browser'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'scripts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);

Gulp run-sequence plugin not working in specific case

I've encountered an issue while using run-sequence plugin for optimizing html code. When I run the gulp command in terminal, 'minify-html', 'inject-css-js-in-html' doesn't work first time when I run it. So I need to exit the terminal and run gulp command again. When I run 'include-html-templates', 'minify-html', 'inject-css-js-in-html' individually it works. So I'm wondering if the run sequence isn't waiting for the 'include-html-templates' task to complete?
'use strict';
/*** Import Plugins ***/
var fileinclude = require('gulp-file-include'),
gulp = require('gulp'),
watch = require('gulp-watch'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
concat = require('gulp-concat'),
concatCss = require('gulp-concat-css'),
uglify = require('gulp-uglify'),
pump = require('pump'),
runSequence = require('run-sequence'),
htmlmin = require('gulp-htmlmin'),
imageOptim = require('gulp-imageoptim'),
inject = require('gulp-inject'),
browserSync = require('browser-sync').create();
const del = require('del');
/*** Define task ***/
/** Stylesheet **/
gulp.task('sass', function () {
return gulp.src('./src/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./build/css/compiled'));
});
gulp.task('concat-css', function () {
return gulp.src('./build/css/compiled/*.css')
.pipe(concatCss("bundle.css"))
.pipe(gulp.dest('./build/css/'));
});
gulp.task('minify-css', ['sass'], function () {
del.sync(['./build/css/compiled/**']);
return gulp.src('./build/css/bundle.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./build/css'));
});
/** Javascript **/
gulp.task('concat-scripts', function () {
return gulp.src('./src/js/*.js')
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./build/js'));
});
gulp.task('minify-scripts', function () {
pump([
gulp.src('build/js/bundle.js'),
uglify(),
gulp.dest('build/js/')
]);
});
/** HTML **/
gulp.task('include-html-templates', function () {
gulp.src(['src/*.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./build/'));
});
gulp.task('inject-css-js-in-html', function () {
gulp.src('./build/*.html')
.pipe(inject(gulp.src(['./build/js/bundle.js', './build/css/bundle.css'], {
read: false
}), {
relative: true
}))
.pipe(gulp.dest('./build'));
});
gulp.task('minify-html', function () {
return gulp.src('build/*.html')
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('./build/'));
});
/* Images */
gulp.task('optimize-images', () =>
gulp.src('src/images/*')
.pipe(imageOptim.optimize())
.pipe(gulp.dest('./build/images/'))
);
/* Reloading page on update */
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: "./"
},
startPath: "build/1.html"
});
});
/*** Watch task ***/
gulp.task('watch', function () {
gulp.watch('src/scss/*.scss', ['sass']);
gulp.watch('build/css/compiled/*.css', function () {
runSequence('concat-css', 'minify-css');
});
gulp.watch('src/js/*.js', function () {
runSequence('concat-scripts', 'minify-scripts');
});
gulp.watch('src/**/*.html', function () {
runSequence('include-html-templates', 'minify-html', 'inject-css-js-in-html');
});
gulp.watch('src/images/*', ['optimize-images']);
});
/* Default task sequence */
gulp.task('default', function () {
gulp.watch(runSequence('browser-sync', 'sass', 'concat-css', 'minify-css', 'concat-scripts', 'minify-scripts', 'include-html-templates', 'minify-html', 'inject-css-js-in-html', 'optimize-images', 'watch'));
});

How to Minify ES6 Using Gulp

I am relatively new to writing a gulpfile.js manually. I have a Backbone and Marionette based project where the gulp file so far looked like the following:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var del = require('del');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var stylish = require('jshint-stylish');
var buffer = require('vinyl-buffer');
var _ = require('lodash');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('clean', function(cb) {
return del([
'app/tmp'
], cb);
});
gulp.task('html', function() {
return gulp.src('./src/index.html')
.pipe($.plumber())
.pipe(gulp.dest('./dist'));
});
gulp.task('images', function() {
gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif',
'./src/assets/images/*.png'
])
.pipe(gulp.dest('./dist/images'));
});
gulp.task('vendor-css', function() {
gulp.src(['./src/assets/styles/vendor/*.css'
])
.pipe(gulp.dest('./dist'));
});
gulp.task('fonts', function() {
gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf',
'./src/assets/fonts/*.svg'
])
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('styles', function() {
return gulp.src('./src/main.styl')
.pipe($.stylus())
.pipe($.autoprefixer())
.pipe($.rename('bundle.css'))
.pipe(gulp.dest('./dist'))
.pipe(reload({ stream: true }));
});
var bundler = _.memoize(function(watch) {
var options = {debug: true};
if (watch) {
_.extend(options, watchify.args);
}
var b = browserify('./src/main.js', options);
if (watch) {
b = watchify(b);
}
return b;
});
var handleErrors = function() {
var args = Array.prototype.slice.call(arguments);
delete args[0].stream;
$.util.log.apply(null, args);
this.emit('end');
};
function bundle(cb, watch) {
return bundler(watch).bundle()
.on('error', handleErrors)
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({ loadMaps: true }))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('./dist'))
.on('end', cb)
.pipe(reload({ stream: true }));
}
gulp.task('scripts', function(cb) {
bundle(cb, true);
});
gulp.task('jshint', function() {
return gulp.src(['./src/**/*.js', './test/**/*.js'])
.pipe($.plumber())
.pipe($.jshint())
.pipe($.jshint.reporter(stylish));
});
var reporter = 'spec';
gulp.task('mocha', ['jshint'], function() {
return gulp.src([
'./test/setup/node.js',
'./test/setup/helpers.js',
'./test/unit/**/*.js'
], { read: false })
.pipe($.plumber())
.pipe($.mocha({ reporter: reporter }));
});
gulp.task('build', [
'clean',
'html',
'images',
'vendor-css',
'fonts',
'styles',
'scripts',
'test'
]);
gulp.task('test', [
'jshint'
]);
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
reporter = 'dot';
bundler(true).on('update', function() {
gulp.start('scripts');
gulp.start('test');
});
gulp.watch('./test/**/*.js', ['test']);
gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']);
gulp.watch(['./src/*.html'], ['html']);
});
gulp.task('default', ['watch']);
Now I need to enable minification of Javascript for which I referred to the following link. I am using the one with uglify-js-harmony as the minifier for ES6 support since most of my code is using ES6 syntax. The modified gulp file looks like the following:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var del = require('del');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var stylish = require('jshint-stylish');
var buffer = require('vinyl-buffer');
var uglifyjs = require('uglify-js-harmony');
var minifier = require('gulp-uglify/minifier');
var pump = require('pump');
var _ = require('lodash');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('clean', function(cb) {
return del([
'app/tmp'
], cb);
});
gulp.task('html', function() {
return gulp.src('./src/index.html')
.pipe($.plumber())
.pipe(gulp.dest('./dist'));
});
gulp.task('images', function() {
gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif',
'./src/assets/images/*.png'
])
.pipe(gulp.dest('./dist/images'));
});
gulp.task('vendor-css', function() {
gulp.src(['./src/assets/styles/vendor/*.css'
])
.pipe(gulp.dest('./dist'));
});
gulp.task('fonts', function() {
gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf',
'./src/assets/fonts/*.svg'
])
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('styles', function() {
return gulp.src('./src/main.styl')
.pipe($.stylus())
.pipe($.autoprefixer())
.pipe($.rename('bundle.css'))
.pipe(gulp.dest('./dist'))
.pipe(reload({ stream: true }));
});
var bundler = _.memoize(function(watch) {
var options = {debug: true};
if (watch) {
_.extend(options, watchify.args);
}
var b = browserify('./src/main.js', options);
if (watch) {
b = watchify(b);
}
return b;
});
var handleErrors = function() {
var args = Array.prototype.slice.call(arguments);
delete args[0].stream;
$.util.log.apply(null, args);
this.emit('end');
};
function bundle(cb, watch) {
return bundler(watch).bundle()
.on('error', handleErrors)
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({ loadMaps: true }))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('./dist'))
.on('end', cb)
.pipe(reload({ stream: true }));
}
gulp.task('scripts', function(cb) {
bundle(cb, true);
});
gulp.task('jshint', function() {
return gulp.src(['./src/**/*.js', './test/**/*.js'])
.pipe($.plumber())
.pipe($.jshint())
.pipe($.jshint.reporter(stylish));
});
gulp.task('compress', function (cb) {
var options = {
preserveComments: 'license'
};
pump([
gulp.src('./dist/bundle.js'),
minifier(options, uglifyjs),
gulp.dest('./dist')
],
cb
);
});
var reporter = 'spec';
gulp.task('mocha', ['jshint'], function() {
return gulp.src([
'./test/setup/node.js',
'./test/setup/helpers.js',
'./test/unit/**/*.js'
], { read: false })
.pipe($.plumber())
.pipe($.mocha({ reporter: reporter }));
});
gulp.task('build', [
'clean',
'html',
'images',
'vendor-css',
'fonts',
'styles',
'scripts',
'test',
'compress'
]);
gulp.task('test', [
'jshint'
]);
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
reporter = 'dot';
bundler(true).on('update', function() {
gulp.start('scripts');
gulp.start('test');
});
gulp.watch('./test/**/*.js', ['test']);
gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']);
gulp.watch(['./src/*.html'], ['html']);
});
gulp.task('default', ['watch']);
Now, when I run gulp the task for compressing starts, does not give any error but never finishes and the build (dist) is made same as before (no minification happens!) . Do I need to somehow integrate this compression task into the bundle function using another .pipe or am I doing something else in a wrong way here ?
Also, is it correct to do the minification after the bundle.js is created which is what am attempting to do here or does it need to be at the stage when the source files are still not concatenated ?
Clone https://github.com/terinjokes/gulp-uglify/
Locate https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13 in prefered checkout (prefered latest)
Set version for uglify-js to mishoo/UglifyJS2#harmony (shortcut for https://github.com/mishoo/UglifyJS2#harmony)
Note that this is a temporary set-up until there is an official release of uglify supporting harmony
Try using babili ES6+ minifier - https://github.com/babel/babili
just pass babili as preset option using babel
.pipe('*.js', babel({presets: ['babili']}))

Categories