Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp 4 gulpfile.js
// Gulp 4
var gulp = require('gulp');
var using = require('gulp-using');
var grep = require('gulp-grep');
var changed = require('gulp-changed');
var del = require('del');
var coffee = require('gulp-coffee');
var less = require('gulp-less');
var coffeelint = require('gulp-coffeelint');
var sourcemaps = require('gulp-sourcemaps');
var replaceHtml = require('gulp-html-replace');
var ngAnnotate = require('gulp-ng-annotate');
var minifyJson = require('gulp-jsonminify');
var minifyImg = require('gulp-imagemin');
var uglifyJs = require('gulp-uglify');
var minifyCss= require('gulp-minify-css');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var karma = require('karma').server;
var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
var webdriver_update = require('gulp-protractor').webdriver_update;
var protractor = require('gulp-protractor').protractor;
var exit = require('gulp-exit');
var merge = require('merge-stream');
var order = require('gulp-order');
var paths = {
dirs: {
build: '.build'
},
html: 'app/**/*.html',
coffee: [
'app/**/*.coffee',
'!app/**/*_test.coffee'
],
images: 'app/**/*.{JPG,jpg,png,gif}',
json: 'app/**/*.json',
sass: 'app/**/*.scss',
less: 'app/**/*.less',
vendor: {
components: {
all: 'app/**/vendor/**/*.*',
js: 'app/**/vendor/**/*.js',
flash: 'app/components/angularjs-jwplayer/vendor/jwplayer/*.swf',
xml: 'app/**/vendor/**/*.xml',
nonJs: [
'app/**/vendor/**/*',
'!app/**/vendor/**/*.js'
]
},
bower: {
js: [
'bower_components/*/*.js',
'bower_components/*/dist/**/*.js',
'bower_components/*/release/**/*.js',
'!bower_components/angular-bootstrap/ui-bootstrap.js',
'!bower_components/lodash/dist/lodash.*.js',
'!bower_components/**/*/*min.*',
'!bower_components/*/Gruntfile.js'
],
css: [
'bower_components/**/font-awesome/css/font-awesome.css',
'!bower_components/**/src/**/*'
],
fonts: [
'bower_components/bootstrap/dist/fonts/*',
'bower_components/font-awesome/fonts/*'
]
}
},
e2e: [
'bower_components/lodash/dist/lodash.js',
'tests-e2e/*.coffee'
]
};
// Shared tasks
gulp.task('glob', function () {
var pattern = '.build/**/*.css';
gulp.src(pattern, { read:false })
.pipe(using());
});
gulp.task('clean', function (cb) {
del(paths.dirs.build, cb);
});
// Development build specific tasks
gulp.task('html', function () {
return gulp.src(paths.html)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('json', function () {
return gulp.src(paths.json)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('coffee', function () {
return gulp.src(paths.coffee)
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(sourcemaps.init())
.pipe(coffee({ bare: true }))
.pipe(ngAnnotate( {
remove: true,
add: true,
single_quotes: true
}))
.pipe(sourcemaps.write('.', { sourceRoot: '/' }))
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('images', function () {
return gulp.src(paths.images)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('sass', function () {
return gulp.src(paths.sass)
.pipe(using({ prefix: 'After changed:' }))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(changed(paths.dirs.build))
.pipe(sourcemaps.write('.', { sourceRoot: '/' }))
.pipe(gulp.dest(paths.dirs.build))
.pipe(grep('**/*.css', { read: false, dot: true }))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('less', function () {
return gulp.src(paths.less)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(changed(paths.dirs.build))
.pipe(sourcemaps.write('.', { sourceRoot: '/' }))
.pipe(gulp.dest(paths.dirs.build))
.pipe(grep('**/*.css', { read: false, dot: true }))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('app', gulp.parallel('html', 'coffee', 'json', 'images', 'sass', 'less'));
gulp.task('vendor:components:js', function () {
return gulp.src(paths.vendor.components.js)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('vendor:components:other', function () {
return gulp.src(paths.vendor.components.nonJs)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('vendor:components', gulp.parallel(
'vendor:components:js', 'vendor:components:other'
));
gulp.task('vendor:js', function () {
return gulp.src(paths.vendor.bower.js)
.pipe(gulp.dest(paths.dirs.build + '/vendor'));
});
gulp.task('vendor:css', function () {
return gulp.src(paths.vendor.bower.css)
.pipe(gulp.dest(paths.dirs.build + '/vendor'));
});
gulp.task('vendor:fonts', function () {
return gulp.src(paths.vendor.bower.fonts, { base: 'bower_components' })
.pipe(gulp.dest(paths.dirs.build + '/vendor'));
});
gulp.task('vendor', gulp.parallel(
'vendor:components', 'vendor:js', 'vendor:css', 'vendor:fonts'
));
gulp.task('all', gulp.parallel('app', 'vendor'));
gulp.task('build', gulp.series('clean', 'all'));
gulp.task('unit', function () {
karma.start({
configFile: __dirname + '/config/karma.js',
singleRun: true
});
});
gulp.task('webdriver-update', webdriver_update);
gulp.task('selenium', gulp.series('webdriver-update', webdriver_standalone));
gulp.task('e2e', function() {
gulp.src(paths.e2e)
.pipe((protractor({
configFile: 'config/protractor.js'
})).on('error', function(e) {
throw e;
}))
.pipe(exit());
});
gulp.task('ws', function(cb) {
browserSync({
server: {
baseDir: paths.dirs.build
},
port: 4000,
notify: false,
open: false
}, cb);
});
gulp.task('watch:styles', function () {
gulp.watch(paths.sass, 'sass');
gulp.watch(paths.less, 'less');
});
gulp.task('watch:code', function () {
gulp.watch([
paths.html,
paths.coffee,
paths.images,
paths.json,
paths.vendor.components.all,
paths.vendor.bower.js
], gulp.series('build', browserSync.reload));
});
gulp.task('watch:unit', function () {
karma.start({
configFile: __dirname + '/config/karma.js',
autoWatch: true
});
});
gulp.task('watch', gulp.parallel('watch:code', 'watch:styles', 'watch:unit'));
// Production build specific tasks
gulp.task('html:prod', function () {
return gulp.src(paths.html)
.pipe(replaceHtml({
'css': 'all.min.css',
'js': 'all.min.js'
}))
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('json:prod', function () {
return gulp.src(paths.json)
.pipe(minifyJson())
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('images:prod', function () {
return gulp.src(paths.images)
.pipe(minifyImg())
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('fonts:prod', function () {
return gulp.src(paths.vendor.bower.fonts)
.pipe(gulp.dest(paths.dirs.build+'/fonts'));
});
gulp.task('flash:prod', function () {
return gulp.src(paths.vendor.components.flash)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('xml:prod', function () {
return gulp.src(paths.vendor.components.xml)
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('scripts:prod', function () {
var vendorJsStream = gulp.src(paths.vendor.bower.js);
var vendorComponentsJsStream = gulp.src(paths.vendor.components.js);
var coffeeStream = gulp.src(paths.coffee)
.pipe(coffee({ bare: true }))
.pipe(ngAnnotate( {
remove: true,
add: true,
single_quotes: true
}));
return merge(coffeeStream, vendorComponentsJsStream, vendorJsStream)
.pipe(order([
'bower_components/jquery/dist/jquery.js',
'bower_components/lodash/dist/lodash.js',
'bower_components/angular/angular.js',
'bower_components/**/*.js',
'app/components/angularjs-jwplayer/vendor/jwplayer/jwplayer.js',
'app/components/**/vendor/**/*.js',
'app/**/app.js'
], { base: '.'}))
.pipe(concat('all.min.js'))
.pipe(uglifyJs())
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('styles:prod', function() {
var cssStream = gulp.src(paths.vendor.bower.css);
var sassStream = gulp.src(paths.sass)
.pipe(sass());
var lessStream = gulp.src(paths.less)
.pipe(less());
return merge(cssStream, lessStream, sassStream)
.pipe(concat('all.min.css'))
.pipe(minifyCss({ keepSpecialComments: 0 }))
.pipe(gulp.dest(paths.dirs.build));
});
gulp.task('all:prod', gulp.parallel(
'html:prod', 'images:prod', 'json:prod',
'scripts:prod', 'styles:prod', 'fonts:prod', 'flash:prod', 'xml:prod'
));
gulp.task('build:prod', gulp.series('clean', 'all:prod'));
// Default task
gulp.task('default', gulp.series('build', 'ws', 'watch'));
@scsskid

This comment has been minimized.

Copy link

commented Dec 26, 2018

Nice Blueprint and inspiration!
on line 216 & 217 gulp.series wrapper is missing!

@RobinHoodCoder

This comment has been minimized.

Copy link

commented Jan 29, 2019

Damn. This is a really nice one! Why do all other people use static dirs?
It's such a pain in the neck to modify that stuff.

Shame I don't need most of it.. Just the basic stuf.. LESS, JS minifacation / img min and bower components..

@DaveyJake

This comment has been minimized.

Copy link

commented Apr 5, 2019

@demisx Which version of gulp-less are you using? I can't (for the life of me) figure out how to get v4.0.1 to work with Gulp v4. There's a memory leak that's impossible to plug in my environment unless I downgrade Gulp to v3 or not use gulp-less.

@MaksZadneprovski

This comment has been minimized.

Copy link

commented May 2, 2019

Hi. What is the folder structure in this project? App, Dist?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.