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']}))
Related
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']);
});
I am setting up gulp for my project,and get this message when I run it.
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: EEXIST: file already exists, mkdir
'C:\Users\Theodosios\Desktop\AngularJs
\Week4\conFusion\dist\fonts'
at Error (native)
I am spending hours to see what's wrong,but I don't know what's happening. So here is my gulp code.
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {beep: true}));
});
// Clean
gulp.task('clean', function () {
return del(['dist']), del(['../json-server/public'], {force: true});
});
// Default task
gulp.task('default', ['clean'], function () {
gulp.start('usemin', 'imagemin', 'copyfonts');
});
gulp.task('usemin', ['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css: [minifycss(), rev()],
js: [ngannotate(), uglify(), rev()]
}))
.pipe(gulp.dest('dist/'))
.pipe(gulp.dest('../json-server/public/'));
});
// Images
gulp.task('imagemin', function () {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({optimizationLevel: 3, progressive: true,
interlaced: true})))
.pipe(gulp.dest('dist/images')).pipe(gulp.dest('../json-
server/public/images'))
.pipe(notify({message: 'Images task complete'}));
});
gulp.task('copyfonts', ['clean'], function () {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts')).pipe(gulp.dest('../json-
server/public/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts')).pipe(gulp.dest('../json-
server/public/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function () {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}',
['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
Any ideas? There is something wrong in one the pipes of node stream,but can't see where is the error.
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;
});
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']);
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'));
});