We Keep Coding

Gulp error File not found with singular glob

After changing gulp 3 to 4 I receive the error when I try to run gulp build:
Error: File not found with singular glob: /assets/css/argon.css (if this was purposeful, use `allowEmpty` option)
The code was working before with gulp 3 (as I was told) and I made a couple of changes to be able to work with gulp 4 as well. The error is received after all tasks has run correcltly.
File is located where it is looking for it:
And here is my gulpfile.js:
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var csscomb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css');
var cssnano = require('gulp-cssnano');
var composer = require('gulp-uglify/composer');
var concat = require('gulp-concat');
var del = require('del');
var imagemin = require('gulp-imagemin');
var htmlPrettify = require('gulp-html-prettify');
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var gulpRun = require('gulp-run');
var gulpUtil = require('gulp-util');
var npmDist = require('gulp-npm-dist');
var postcss = require('gulp-postcss');
var runSequence = require('gulp4-run-sequence');
// var sass = require('gulp-sass');
var uglifyEs = require('uglify-es');
var uglify = composer(uglifyEs, console);
var rename = require('gulp-rename');
var useref = require('gulp-useref-plus');
var wait = require('gulp-wait');
var sass = require('gulp-sass')(require('sass'));
// Define paths
var paths = {
dist: {
base: 'dist',
img: 'dist/assets/img',
libs: 'dist/assets/vendor'
},
base: {
base: './',
node: 'node_modules'
},
src: {
base: './',
css: 'assets/css',
html: '**/*.html',
img: 'assets/img/**/*.+(png|jpg|gif|svg)',
js: 'assets/js/**/*.js',
scss: 'assets/scss/**/*.scss'
}
}
// Compile SCSS
gulp.task('scss', async function() {
return gulp.src(paths.src.scss)
.pipe(wait(500))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([require('postcss-flexbugs-fixes')]))
.pipe(autoprefixer({
browsers: ['> 1%']
}))
.pipe(csscomb())
.pipe(gulp.dest(paths.src.css))
.pipe(browserSync.reload({
stream: true
}));
});
// Minify CSS
gulp.task('minify:css', async function() {
return gulp.src([
paths.src.css + '/argon.css'
])
.pipe(cleanCss())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.dist.base + '/css'))
});
// Concat JS files
gulp.task('concat:js', async function(done) {
files = [
paths.src.base + '/assets/js/components/license.js',
paths.src.base + '/assets/js/components/layout.js',
paths.src.base + '/assets/js/components/init/*js',
paths.src.base + '/assets/js/components/custom/*js',
paths.src.base + '/assets/js/components/maps/*js',
paths.src.base + '/assets/js/components/charts/*js',
paths.src.base + '/assets/js/components/vendor/*js'
];
return gulp
.src(files)
.pipe(concat("argon.js"))
.pipe(gulp.dest(paths.dist.base + '/js'));
done();
});
// Minify JS
gulp.task('minify:js', async function(cb) {
return gulp.src([
paths.dist.base + '/js/argon.js'
])
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.dist.base + '/js'))
});
// Live reload
gulp.task('browserSync', async function() {
browserSync.init({
server: {
baseDir: [paths.src.base, paths.base.base]
},
})
});
// Watch for changes
gulp.task('watch', gulp.series('browserSync', 'scss', async function() {
gulp.watch(paths.src.scss, ['scss']);
gulp.watch(paths.src.js, browserSync.reload);
gulp.watch(paths.src.html, browserSync.reload);
}));
// Clean
gulp.task('clean:dist', async function() {
return del.sync(paths.dist.base);
});
// Copy CSS
gulp.task('copy:css', async function() {
return gulp.src([
paths.src.base + '/assets/css/argon.css'
])
.pipe(gulp.dest(paths.dist.base + '/css'))
});
// Copy JS
gulp.task('copy:js', async function() {
return gulp.src([
paths.src.base + '/assets/js/argon.js'
])
.pipe(gulp.dest(paths.dist.base + '/js'))
});
// Build
gulp.task('build', async function(callback) {
runSequence('clean:dist', 'scss', 'copy:css', 'copy:js', 'concat:js', 'minify:js', 'minify:css',
callback);
});
// Default
gulp.task('default', async function(callback) {
runSequence(['scss', 'browserSync', 'watch'],
callback
)
});
Any help would be appreciated :)

In copy:css you have this line:
paths.src.base + '/assets/css/argon.css'
where apparently your error is. The problem is your paths.src.base is defined as
base: './' to which you are adding /assets/css/argon.css so you end up with
.//assets/css/argon.css note the two leading backslashes.
Get rid of the leading backslash in the /assets/... and check the rest of your code for the same problem.
Also since you are using gulp4 get rid of runSequence - look at the documentation for gulp.series.

Css stylesheet has the wrong path when using gulp

I have been struggling for a while now and it is fairly frustrating to be honest.
The problem:
I created a gulpfile for my static website, and all i want to do is use browserSync, to compile sass into css and to minify the script and css files. Everything works fine, excluding one thing:
When I run "gulp" everything loads, besides de css file, which is located in "CSS/". Apparently the server thinks that the css file is ("CSS/style.css/") a folder actually.
Screenshot with the console error:
image
the css file is located in "css/style.css"
"use strict";
let paths = {
script: "js/*.js",
minifiedScript: 'script.min.js',
cssPath: "css/*.css",
productionFolder: "production",
sassPath: "scss/*.scss",
htmlFiles: "*.html"
};
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');
const browserSync = require('browser-sync').create();
const cssMin = require('gulp-css');
const sass = require('gulp-sass');
const inject = require('gulp-inject');
const rename = require("gulp-rename");
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
return gulp.src(paths.sassPath)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
gulp.task('index', function () {
var target = gulp.src('index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src([paths.script,paths.cssPath], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest(''));
});
gulp.task('cssMinify', function(){
return gulp.src(paths.cssPath)
.pipe(cssMin())
.pipe(gulp.dest(paths.productionFolder + "/minified css"))
.pipe(browserSync.stream());
});
gulp.task('clean', function() {
// You can use multiple globbing patterns as you would with `gulp.src`
return del(['build']);
});
gulp.task('scripts', ['clean'], function() {
// Minify and copy the JS file
return gulp.src(paths.script)
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat(paths.minifiedScript))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.productionFolder + "/minified JS"));
});
gulp.task('jsMinify:watch', function() { gulp.watch(paths.script, ['scripts']) });
gulp.task('sass:watch', function() { gulp.watch(paths.sassPath, ['sass']) });
gulp.task('cssMinify:watch', function() { gulp.watch(paths.cssPath, ['cssMinify']) });
gulp.task('html:watch', function() { gulp.watch(paths.htmlFiles).on('change', browserSync.reload) });
gulp.task('default', ['sass', 'index', 'cssMinify', 'clean', 'html:watch', 'jsMinify:watch', 'sass:watch', 'cssMinify:watch','browserSync', 'scripts']); // DEVELOPMENT

gulpfile.js is not concatenating all css after sass build

This is my gulpfile.js
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify'); // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var livereload = require('gulp-livereload');
var sass = require('gulp-sass');
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
scss: [
'node_modules/font-awesome/scss/font-awesome.scss',
'./src/scss/default.scss'
],
sassBuilds: './src/builds/css/',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./src/builds/css/*.css'
],
fonts:[
'node_modules/font-awesome/fonts/**.*'
],
dist: './dist',
mainJs: './src/main.js'
}
}
//Start my local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function() {
gulp.src('dist/index.html')
.pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/', app: 'Chrome'}));
});
gulp.task('livereload', function (){
gulp.src('./src/**/*')
.pipe(connect.reload());
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('js', function() {
browserify(config.paths.mainJs)
.transform(reactify) //this would 'bundle' the JSX
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('css', function() {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'));
});
gulp.task('lint', function() {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html', 'livereload']);
gulp.watch(config.paths.scss, ['sass', 'livereload']);
gulp.watch(config.paths.js, ['js', 'lint']);
});
gulp.task('sass', function () {
return gulp.src(config.paths.scss)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(config.paths.sassBuilds));
});
gulp.task('icons', function() {
return gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/fonts'));
});
gulp.task('default', ['html', 'sass', 'js', 'lint', 'css', 'icons', 'open', 'watch']);
sass task first runs to create 2 css files into builds/css/
After that css task runs and should concat all css files from the config.paths.css but it doesn't, only watch task does and barely, sometimes it does, sometimes it doesn't (seriously). I feel there is some spaghetti going on here.

If you are expecting that the sass task will always finish before the css task starts Don't. From the gulp documentation
Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order.
The usual way to fix this is to make the css task wait for the sass task to finish by:
gulp.task('css', ['sass'], function() {

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']);

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']}))