var gulp = require (' gulp ');//tool var autoprefixer = require (' gulp-autoprefixer '); var include = require (' Gulp-file-include var gulpsequence = require (' gulp-sequence '); var clean = require (' Gulp-clean ');
transcoding var sass = require (' Gulp-sass '); var Babel = require (' Gulp-babel '); var css_base64 = require (' gulp-css-base64 ');
Compression optimization var minifyhtml = require (' gulp-htmlmin '); var minifyimage = require (' gulp-imagemin '); var minifyjs = require (' Gulp-jsmin '); var minifycss = require (' gulp-clean-css ');
Version control var rev = require (' Gulp-rev '), var revcollector = require (' gulp-rev-collector '); var deloriginal = require (' Gulp-rev-delete-original ');//localhostvar Browsersync = require (' Browser-sync '). Create (); var reload = browsersync.reload;//path definition var srcpath = {root: ' src ', html: [' src/**/*.html ', '!src/include/**/*.html '], images: ' src/ images/* ', CSS: ' Src/css/*.scss ', JS: ' Src/js/*.js ', library: ' src/library/*.js '},distpath = {root: ' dist ', HTML: ' Dist ', Images: ' Dist/images ', CSS: ' Dist/css ', JS: ' Dist/js ', library: ' Dist/library ', manifest: ' Dist/**/*.json ',};// The plugin library handles Gulp.task (' library ', () = {return gulp.src (srcpath.library). Pipe (Minifyjs ()). Pipe (Gulp.dest ( distpath.library));})
Production Environment//CSS processing gulp.task (' Css-dist ', () = {return Gulp.src ([distpath.manifest, Distpath.css + '/*.css ']). PIPE ( Revcollector ()). Pipe (rev ()). Pipe (Deloriginal ()). Pipe (Gulp.dest (DISTPATH.CSS)). Pipe (Rev.manifest ()). PIPE ( Gulp.dest (DISTPATH.CSS))}) Gulp.task (' Css-compile ', () = {return gulp.src (SRCPATH.CSS). Pipe (Css_base64 ({ Maxweightresource:8 * 1024x768,}). Pipe (Sass ()). Pipe (Autoprefixer ({browsers: [' last 2 versions '], Cascade:false,}). Pi PE (MINIFYCSS ()). Pipe (Gulp.dest (DISTPATH.CSS))})//js handles Gulp.task (' Js-dist ', () =>{return gulp.src (srcpath.js). Pipe (Babel ({presets: [' env '],})). Pipe (Minifyjs ()). Pipe (rev ()). Pipe (Gulp.dest (distpath.js)). Pipe (Rev.manifest ()) . Pipe (Gulp.dest (distpath.js))})//image handles Gulp.task (' Images-dist ', () =>{return gulp.src (srcpath.images). PIPE ( Minifyimage ()). Pipe (rev ()). Pipe (Gulp.dest (distpath.images)). Pipe (Rev.manifest ()). Pipe (Gulp.dest ( distpath.images)})//html handles Gulp.task (' Html-dist ', () =>{return gulp.src ([Distpath.manifest, ...Srcpath.html]). Pipe (Include ({})). Pipe (Revcollector ()). Pipe (minifyhtml ({collapsewhitespace:true,})). PIPE ( Gulp.dest (distpath.html))})
The development environment//CSS handles Gulp.task (' Css-dev ', () = {return gulp.src (SRCPATH.CSS). Pipe (Sass ()). Pipe (Autoprefixer ({browsers): [' last 2 versions '], Cascade:false,}). Pipe (Gulp.dest (DISTPATH.CSS)). Pipe (Reload ({stream:true}))})//js processing Gulp.task (' Js-dev ', () =>{return gulp.src (srcpath.js)//. Pipe (Babel ({//presets: [' env '],//}). Pipe (Gulp.dest (distpath.js) ). Pipe (Reload ({stream:true}))
})//library handles Gulp.task (' Library-dev ', () =>{return gulp.src (srcpath.library). Pipe (Gulp.dest (distpath.library)) . Pipe (Reload ({stream:true}))})
Image handles Gulp.task (' Images-dev ', () =>{return gulp.src (srcpath.images). Pipe (Gulp.dest (distpath.images)). PIPE ( Reload ({stream:true}))
})//html handles Gulp.task (' Html-dev ', () =>{return gulp.src (srcpath.html). Pipe (Include ({})). Pipe (Gulp.dest ( distpath.html)). Pipe (Reload ({stream:true}))})
Clear the Dist directory gulp.task (' Clean ', () =>{return gulp.src (' dist/* '). Pipe (Clean ({read:false}))})//Clear Manifestgulp.task ( ' Clean-manifest ', () =>{return gulp.src (' Dist/**/*.json '). Pipe (Clean ({read:false}))})//static server Gulp.task (' Browsersync ', () =>{browsersync.init ({server: {baseDir: './dist ',//proxy: ' IP Address ',}})}) Gulp.task (' Check-dist ', () = >{browsersync.init ({server: {baseDir: './dist ',//proxy: ' IP Address ',}})})//Buildgulp.task (' Build ', gulpsequence (' CLE An ', [' images-dist ', ' js-dist ', ' library '], ' css-compile ', ' css-dist ', ' html-dist ', ' clean-manifest ');//Devgulp.task (' Dev ', (CB) =>{gulpsequence (' Clean ', [' Library ', ' Css-dev ', ' Images-dev ', ' Js-dev ', ' Html-dev '], ' Browsersync ') (CB ); Gulp.watch (' src/**/*.scss ', [' Css-dev ']); Gulp.watch (' src/**/*.html ', [' Html-dev ']); Gulp.watch (Srcpath.js, [' Js-dev ']); Gulp.watch (Srcpath.library, [' Library-dev ']); Gulp.watch (Srcpath.images, [' Images-dev ']);})
A more complete gulpfile.js.
