5分钟教你快速掌握gulp4并搭建一个项目脚手架

3. gulp.prod.js

const gulp = require('gulp');
// const Rename = require('gulp-rename');   // 重命名
// js
const Uglify = require('gulp-uglify');   // 压缩js
// const Babel = require('gulp-babel');
// css
const Minifycss = require('gulp-minify-css');   // 压缩css
const Less = require('gulp-less');// 编译less
const Autoprefixer = require('gulp-autoprefixer');  // 浏览器前缀
// html
const MinifyHtml = require("gulp-minify-html"); //压缩html
const FileInclude = require('gulp-file-include'); // 文件模块化
// image
const Imagemin = require('gulp-imagemin');
const Pngquant = require('imagemin-pngquant');  //png图片压缩插件
const Cache = require('gulp-cache'); 

const Clean = require('gulp-clean');     // 清理目录

// md5 发版本的时候为了避免浏览器读取了旧的缓存文件，需要为其添加md5戳
const md5 = require("gulp-md5-plus");

const config = require('./config');
const { dist } = config;
// html
async function html() {
    return gulp.src('src/views/*.html')
 .pipe(FileInclude({ // HTML模板替换，具体用法见下文
     prefix: '##',
     basepath: '@file'
 }))
 // .pipe(MinifyHtml())
 .on('error', function(err) {
     console.error('Task:copy-html,', err.message);
     this.end();
 })
 .pipe(gulp.dest(dist)) // 拷贝 
}

// css
async function css() {
    return await gulp.src('src/css/**')
    .pipe(Less())//编译less
    .pipe(Autoprefixer({
 cascade: true, //是否美化属性值 默认：true 像这样：
 //-webkit-transform: rotate(45deg);
 // transform: rotate(45deg);
 remove: true //是否去掉不必要的前缀 默认：true
    }))
    .pipe(Minifycss({   // 压缩css
 //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
 advanced: true,
 //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
 compatibility: '',
 //类型：Boolean 默认：false [是否保留换行]
 keepBreaks: false,
 //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀 
 keepSpecialComments: '*'
    }))
    .pipe(gulp.dest(dist + '/css'))
    .pipe(md5(10, dist + '/*.html', {
 mappingFile: 'manifest.json',
 connector: '.' // 文件名和hash的连接符
    }))
    .pipe(gulp.dest(dist + '/css')) //当前对应css文件
}

// js
async function js() {
    return await gulp.src('src/js/**')
    // .pipe(Babel({
    //     presets: ['es2015']
    // }))
    .pipe(Uglify()) // 压缩js
    .pipe(gulp.dest(dist + '/js'))
    .pipe(md5(10, dist + '/*.html', {
 mappingFile: 'manifest.json',
 connector: '.'
    }))
    .pipe(gulp.dest(dist + '/js')) // 拷贝
}

// image
async function image() {
    return await gulp.src('src/images/*')
    .pipe(Cache(Imagemin({
 optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
 progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
 multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
 svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
 use: [Pngquant()] //使用pngquant深度压缩png图片的imagemin插件
    })))
    .pipe(gulp.dest(dist + '/images'));
}


// clean dir
async function clean() {
    // 不设置allowEmpty: true会报File not found with singular glob
    return await gulp.src(dist, {allowEmpty: true}).pipe(Clean());
}



module.exports = {
    html,
    css,
    js,
    image,
    clean
}

const gulp = require('gulp');

// 根据环境引入不同的配置文件
let buildConfig;
if(process.env.NODE_ENV === 'dev') {
    buildConfig = require('./build/gulp.dev');
    gulp.task('server', buildConfig.server);  // 本地服务
    
} else {
    buildConfig = require('./build/gulp.prod');
    // gulp.task('md5', gulp.series(buildConfig.md5Css, buildConfig.md5Js));
    gulp.task('clean', buildConfig.clean);    // 清理目录   
}

gulp.task('html', buildConfig.html);      // 打包html
gulp.task('js', buildConfig.js);   // 打包js
gulp.task('css', buildConfig.css); // 打包css
gulp.task('images', buildConfig.image);   // 打包image
gulp.task('sources', gulp.series('html', gulp.parallel('js', 'css', 'images')));


// 监听文件变化
gulp.task('watch', async () => {
    gulp.watch('src/views/*', gulp.series('html')); // 监听HTML变化
    gulp.watch('src/js/**', gulp.series('js')); // 监听js变化
    gulp.watch('src/css/*', gulp.series('css')); // 监听css变化
    gulp.watch('src/images/*', gulp.series('images')); // 监听image变化
});

// build
if(process.env.NODE_ENV === 'dev') {
    gulp.task('dev', gulp.series('sources', 'server', 'watch'));
} else {
    gulp.task('build', gulp.series('sources'));
}

{
  "dependencies": {
    "@babel/core": "^7.4.5",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-babel": "^8.0.0",
    "gulp-cache": "^1.1.2",
    "gulp-clean": "^0.4.0",
    "gulp-connect": "^5.7.0",
    "gulp-file-include": "^2.0.1",
    "gulp-imagemin": "^6.0.0",
    "gulp-jshint": "^2.1.0",
    "gulp-less": "^4.0.1",
    "gulp-md5-plus": "^1.0.3",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.2",
    "gulp-util": "^3.0.8",
    "http-proxy-middleware": "^0.19.1",
    "http-server": "^0.11.1",
    "imagemin-pngquant": "^8.0.0",
    "jshint": "^2.10.2",
    "jsonfile": "^5.0.0",
    "webpack": "^4.35.2"
  },
  "scripts": {
    "start": "NODE_ENV=dev gulp dev",
    "build": "NODE_ENV=prod gulp clean && gulp build",
    "serve": "http-server dist/static -p 3000"
  },
  "devDependencies": {}
}