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']);
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 want to minify and rename all my .css in the folder (../dist/css), but it says that there's an error (You can see the error in the screenshot below).
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var lost = require('lost');
var rucksack = require('rucksack-css');
var cssnano = require('cssnano');
var rename = require('gulp-rename');
gulp.task('css', function() {
var plugins = [
autoprefixer({
browsers: ['last 2 version']
}),
rucksack({
quantityQueries: false,
alias: false,
easings: false,
inputPseudo: false
}),
lost
];
return gulp.src('app/styles/**/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('dist/css'));
});
//========THIS PART IS NOT WORKING============
gulp.task('css-min', ['css'], function() {
return gulp.src('app/styles/*.css')
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css')); });
gulp.task('watch', ['css', 'css-min'], function() {
gulp.watch('app/styles/**/*.css', ['css']);
});
gulp.task('default', ['watch']);
Here is the snapshot of command prompt when I run gulp. Previously it used to work correctly but now, it is showing some weird errors.
my view folder is supposed to contain only templates, so why is it displaying bootstrap.social.css not found?
and my project folder looks like-
Project-
app-
fonts-...
images-...
scripts-
app.js
controllers.js
services.js
styles-...
index.html
views-
various html templates
bower_components-...
dist-..
node_modules-...
gulpfile.js
package.json
...
here is my gulpfile.js' 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'),
ngannotate = require('gulp-ng-annotate'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// 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/'));
});
// 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(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'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/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);
});
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 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']}))