Created
May 15, 2019 19:29
-
-
Save tanmoythander/6e166b872c14830a86a8c5a7af160fb2 to your computer and use it in GitHub Desktop.
Gulp v4 sample gulpfile.js for building AngularJS source code. If you want the full example, check https://github.com/tanmoythander/angular-gulp-boilerplate.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The build process consists of following steps: | |
* 1. clean /_build folder | |
* 2. minify css files | |
* 3. copy and minimize images | |
* 4. minify and copy all HTML files into $templateCache | |
* 5. build index.html | |
* 6. minify and copy all JS files | |
* 7. copy fonts | |
* 8. show build folder size | |
* | |
*/ | |
var gulp = require('gulp'); | |
var eslint = require('gulp-eslint'); | |
var browserSync = require('browser-sync').create(); | |
var del = require('del'); | |
var size = require('gulp-size'); | |
var changed = require('gulp-changed'); | |
var imagemin = require('gulp-imagemin'); | |
var notify = require('gulp-notify'); | |
var htmlmin = require('gulp-htmlmin'); | |
var angularTemplateCache = require('gulp-angular-templatecache'); | |
var htmlReplace = require('gulp-html-replace'); | |
var usemin = require('gulp-usemin'); | |
var cleanCss = require('gulp-clean-css'); | |
var uglify = require('gulp-uglify'); | |
var jsConfig = { | |
extends: 'eslint:recommended', | |
rules: { | |
'quotes': [1, 'single'], | |
'curly': [1, 'multi-line'], | |
'no-extra-parens': 1, | |
'key-spacing': [1, { | |
'beforeColon': false, | |
'afterColon': true, | |
'mode': 'strict' | |
}], | |
'no-multi-spaces': 1, | |
'dot-location': [1, 'property'], | |
'max-len': [1, { 'code': 80, 'tabWidth': 2 }], | |
'no-trailing-spaces': 1, | |
'indent': [1, 'tab'], | |
'no-empty-function': 2, | |
'eol-last': [2, 'always'], | |
'semi': [2, 'always'], | |
'no-multiple-empty-lines': 2 | |
} | |
}; | |
// lint JS | |
function lint() { | |
return gulp.src(['app/**/*.js', | |
'components/**/*.js', 'js/**/*.js', | |
'!js/nonangular/*']) | |
.pipe(eslint(jsConfig)) | |
.pipe(eslint.format()); | |
} | |
function lintBuild() { | |
return gulp.src(['app/**/*.js', | |
'components/**/*.js', 'js/**/*.js', | |
'!js/nonangular/*']) | |
.pipe(eslint(jsConfig)) | |
.pipe(eslint.format()) | |
.pipe(eslint.failAfterError()); | |
} | |
// clean | |
function cleanBuild(done) { | |
del([ | |
'./_build/' | |
]); | |
done(); | |
} | |
// fonts | |
function fonts() { | |
var fonts = size(); | |
return gulp.src('./fonts/*.{ttf,woff,woff2,eof,eot,svg}') | |
.pipe(changed('./_build/fonts')) | |
.pipe(gulp.dest('./_build/fonts')) | |
.pipe(fonts) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return "Total Font size " + fonts.prettySize; | |
} | |
})); | |
} | |
// images | |
function images() { | |
var images = size(); | |
return gulp.src('./images/*.{gif,jpg,jpeg,png}') | |
.pipe(changed('./_build/images')) | |
.pipe(imagemin({ | |
verbose: true | |
})) | |
.pipe(gulp.dest('./_build/images')) | |
.pipe(images) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return "Minified Image size " + images.prettySize; | |
} | |
})); | |
} | |
// template cache | |
function cacheTemplate() { | |
var template = size(); | |
return gulp.src([ | |
'./**/*.html', | |
'!bower_components/**/*.*', | |
'!node_modules/**/*.*', | |
'!_build/**/*.*' | |
]) | |
.pipe(htmlmin({ | |
collapseWhitespace: true | |
})) | |
.pipe(angularTemplateCache({ | |
module: 'boilerplate' | |
})) | |
.pipe(gulp.dest('_build/js')) | |
.pipe(template) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return "Build Template size " + template.prettySize; | |
} | |
})); | |
} | |
// minify CSS and JS | |
function minCssJs() { | |
return gulp.src('./index.html') | |
// add templates path | |
.pipe(htmlReplace({ | |
'templates': '<script src="js/templates.js"></script>' | |
})) | |
.pipe(usemin({ | |
css: [cleanCss({compatibility: 'ie8'}), 'concat'], | |
libs: [uglify()], | |
nonangularlibs: [uglify()], | |
angularlibs: [uglify()], | |
appcomponents: [uglify()], | |
mainapp: [uglify()] | |
})) | |
.pipe(gulp.dest('./_build/')); | |
} | |
// File sizes | |
function sourceTemplateSize() { | |
var sourceTemplate = size(); | |
return gulp.src(['*.html', | |
'components/**/*.html', 'views/**/*.html']) | |
.pipe(sourceTemplate) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return 'Source Template size ' + sourceTemplate.prettySize; | |
} | |
})); | |
} | |
function sourceJsSize() { | |
var sourceJs = size(); | |
return gulp.src(['app/**/*.js', | |
'components/**/*.js', 'js/**/*.js']) | |
.pipe(sourceJs) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return 'Source JS size ' + sourceJs.prettySize; | |
} | |
})); | |
} | |
function sourceCssSize() { | |
var sourceCss = size(); | |
return gulp.src('./styles/**/*.css') | |
.pipe(sourceCss) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return 'Source CSS size ' + sourceCss.prettySize; | |
} | |
})); | |
} | |
function buildCssSize() { | |
var buildCss = size(); | |
return gulp.src('./_build/css/style.min.css') | |
.pipe(buildCss) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return 'Build CSS size ' + buildCss.prettySize; | |
} | |
})); | |
} | |
function buildJsSize() { | |
var buildJs = size(); | |
return gulp.src('./_build/js/*.js') | |
.pipe(buildJs) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return 'Build JS size ' + buildJs.prettySize; | |
} | |
})); | |
} | |
function buildSize() { | |
var build = size(); | |
return gulp.src('./_build/**/*.*') | |
.pipe(build) | |
.pipe(notify({ | |
onLast: true, | |
message: function() { | |
return 'Entire build size ' + build.prettySize; | |
} | |
})); | |
} | |
// sync to browser | |
// no return needed | |
function syncSource(done) { | |
browserSync.init({ | |
server: { | |
baseDir: "./" | |
}, | |
port: 3000 | |
}); | |
done(); | |
} | |
function syncBuild(done) { | |
browserSync.init({ | |
server: { | |
baseDir: "./_build/" | |
}, | |
port: 3000 | |
}); | |
done(); | |
} | |
function syncReload(done) { | |
browserSync.reload(); | |
done(); | |
} | |
// watch | |
// no return | |
// no callback | |
function watch() { | |
gulp.watch(['*.html', 'components/**/*.html', 'views/**/*.html'], | |
gulp.parallel(syncReload, sourceTemplateSize)); | |
gulp.watch(['app/**/*.js', 'components/**/*.js', 'js/**/*.js'], | |
gulp.parallel(syncReload, sourceJsSize, lint)); | |
gulp.watch('./styles/**/*.css', | |
gulp.parallel(syncReload, sourceCssSize)); | |
} | |
// define output tasks | |
exports.default = gulp.parallel(watch, syncSource); | |
exports.serveSource = syncSource; | |
exports.build = gulp.series(lintBuild, cleanBuild, | |
cacheTemplate, minCssJs, images, fonts, | |
gulp.parallel(buildCssSize, buildJsSize, buildSize)); | |
exports.serveBuild = gulp.series(lintBuild, cleanBuild, | |
cacheTemplate, minCssJs, images, fonts, | |
gulp.parallel(buildCssSize, buildJsSize, buildSize, syncBuild)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment