[TOC] ##概述 使用教程查看 [github](https://github.com/idcpj/learn_gulpfile) gulpfile.js ``` const { src, dest, series, watch,task,parallel } = require('gulp'); const connect = require('gulp-connect'); // tools const rename = require('gulp-rename'); const rev = require('gulp-rev'); //對文件名加MD5后綴 const revCollector = require('gulp-rev-collector'); //路徑替換 const clean = require('gulp-clean'); const fileinclude = require('gulp-file-include');// 使用@@include 的方式引入 文件 const preprocess = require("gulp-preprocess"); const gulpif = require('gulp-if'); // js const uglify = require('gulp-uglify'); const babel=require("gulp-babel"); const ts = require('gulp-typescript'); // html const htmlmin = require('gulp-htmlmin'); const revappend = require('gulp-rev-append'); //使用文件hash // css const minifyCSS = require('gulp-minify-css'); const sass = require('gulp-sass')(require('sass')); const autoprefixer = require('gulp-autoprefixer'); // img const imagemin = require('gulp-imagemin'); const entry = "src/" //要處理的源碼文件夾 const dist = 'dist/'; //被處理后的文件保存的目錄 const NODE_EVN=true; //清除文件夾里之前的內容 function cleanBefore() { return src(dist, { read: false,allowEmpty: true }) .pipe(clean()); } //html壓縮 function handleHtml() { var options = { removeComments: true, //清除HTML注釋 collapseWhitespace: true, //壓縮HTML collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> minifyJS: true, //壓縮頁面JS minifyCSS: true //壓縮頁面CSS }; return src(entry + '**/*.html') .pipe(gulpif(NODE_EVN,htmlmin(options))) .pipe(preprocess({context:{NODE_ENV:"production",DEFINE1:"select_1"}})) // 相當于 C/C++ 中的宏定義 .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(dest(dist)) .pipe(connect.reload()); //自動刷新瀏覽器 } //css壓縮,將源碼文件夾內的css文件夾下的所有css壓縮，并生成文件名帶hash隨機值的新文件保存在dist的css目錄下 function handleCss() { return src(entry + 'css/*.scss') .pipe(sass()) .pipe(autoprefixer({cascade: false})) .pipe(gulpif(NODE_EVN,minifyCSS())) //壓縮css .pipe(gulpif(NODE_EVN,rev())) //文件名加MD5后綴 .pipe(dest(dist+'css/')) //輸出到css目錄 .pipe(gulpif(NODE_EVN,rev.manifest('rev-css-manifest.json'))) ////生成一個rev-css-manifest.json .pipe(gulpif(NODE_EVN,dest('rev'))) //將 rev-css-manifest.json 保存到 rev 目錄內 .pipe(connect.reload()); } //js壓縮,將源碼文件夾src內的js文件夾下的所有js文件壓縮混淆，并生成文件名帶hash隨機值的新文件保存在dist的js目錄下 function handleJs() { return src(entry + 'js/*.js') .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(gulpif(NODE_EVN,uglify({ compress: { // drop_console: argv.env != 'development'?true:false, // 過濾 console // drop_debugger: argv.env != 'development'?true:false // 過濾 debugger drop_console:false, // 過濾 console drop_debugger:NODE_EVN // 過濾 debugger } }))) //壓縮js到一行 .pipe(gulpif(NODE_EVN,rev())) //文件名加MD5后綴 .pipe(dest(dist+'js/')) //輸出到js目錄 .pipe(gulpif(NODE_EVN,rev.manifest())) ////生成一個rev-js-manifest.json .pipe(gulpif(NODE_EVN,dest('rev'))) //將 rev-js-manifest.json 保存到 rev 目錄內 .pipe(connect.reload()); } //打包圖片 function handleImgs() { return src(entry + 'img/**/*') .pipe(gulpif(NODE_EVN,rev())) // .pipe(imagemin([ // imagemin.gifsicle({interlaced: true}), // imagemin.mozjpeg({quality: 75, progressive: true}), // imagemin.optipng({optimizationLevel: 5}), // imagemin.svgo({ // plugins: [ // {removeViewBox: true}, // {cleanupIDs: false} // ] // }) // ])) .pipe(dest(dist + 'img/')) .pipe(gulpif(NODE_EVN,rev.manifest('rev-img-manifest.json'))) //生成一個rev-img-manifest.json .pipe(gulpif(NODE_EVN,dest('rev'))) //將 rev-img-manifest.json 保存到 rev 目錄內; .pipe(connect.reload()); } //使用rev-collect將在html引入的資源路徑也替換成md5文件名 function srcReplace() { //html，針對js,css,img return src(['rev/*.json', dist+'*.html']) .pipe(gulpif(NODE_EVN,revCollector({replaceReved:true }))) .pipe(dest(dist)); } function server() { connect.server({ root: 'dist', host: '127.0.0.1', livereload: true, port: 8888, }); } function watcher() { const watcher = watch([ "src/**/*"]); watcher.on( "change", series(cleanBefore,handleCss, handleHtml, handleJs, handleImgs,srcReplace) ) } task("ts",()=>{ const tsProject = ts.createProject(entry+'tsconfig.json', { noImplicitAny: true }); return src(entry+'/**/*.ts') .pipe(tsProject()) .pipe(dest(dist)); }) task("change",parallel( series(cleanBefore,handleCss, handleHtml, handleJs, handleImgs,srcReplace), watcher, server) ) exports.default = series(cleanBefore,handleCss, handleHtml, handleJs, handleImgs,srcReplace); //組合任務 ```