Gulp
gulp是基于流的任务化构建工具，读取源文件后在管道中通过一系列插件进行压缩、处理然后输出到目标地址。
1.使用
需要node环境，先全局安装gulp-cli
1 npm install --global gulp-cli
cmd进入项目目录，分别输入
1 npm init 2 npm i gulp -D
根目录下创建gulpfile.js文件，在该文件中配置gulp任务，下面以压缩html文件为例介绍：
1 const gulp = require('gulp') // 引入gulp 2 3 const htmlmin = require('gulp-htmlmin') // 引入压缩HTML的插件 4 5 gulp.task('html', function () { // 创建一个名为gulp的任务 6 return gulp 7 .src('./src/index.html') // 读取源文件到流 8 .pipe( // pipe管道中对读取的流进行处理 9 htmlmin({ // 执行压缩 10 collapseWhitespace: true, // 去掉空格 11 removeAttributeQuotes: true // 删除属性的引号 12 }) 13 ) 14 .pipe(gulp.dest('dist/')) // 输出到目标地址 15 })
因为用到了html压缩插件需要先安装npm i gulp-htmlmin -D
在命令行中输入gulp 任务名即可，如：
1 gulp html
此时查看dist目录，已经生成了压缩好的html:
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Sass</title></head><body><div class=container>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, consectetur eos possimus optio corrupti at. Alias voluptatem ut ducimus aspernatur totam harum magni quidem odio adipisci. Eum consequuntur explicabo non.</div></body></html>
gulp的使用大抵如此，src读取源文件，pipe中利用插件(如gulp-htmlmin)进行处理，再由dest输出到目标位置。
2.主要功能
gulp的强大之处在于可以使用各种插件进行处理，常用有：压缩html\css\js及静态图片，转译sass、es6+语法；监听文件改动，自动将压缩后的css及js注入html文件；启动开发服务器，实时刷新等。
// 常用插件
// gulp-htmlmin 压缩html
// gulp-sass 编译sass
// gulp-cssmin 压缩css
// gulp-babel 转译es6+语法
// gulp-concat js / css 合并
// gulp-uglify 压缩js
// gulp-rename 重命名
// gulp-less 编译less
// gulp-inject 把压缩后的css和js注入到html中
// gulp-connect 开发服务器、实时自动编译刷新
// open 打开浏览器
// browser-sync 创建开发服务器并同步浏览器 推荐
// 重要API
// src 源文件夹
// dest 目标文件夹
// task 注册任务
// pipe 流管道
// watch 监听文件
注：
gulp4.0版本以后不能使用数组放依赖的任务了，gulp.task没有了以往的三参数，可以用gulp.parallel和gulp.series来随意嵌套并行及串行任务，任务依赖需要放到series里面，在该函数的回调里面执行后续任务。
gulp组合任务时异步任务可以通过return保证任务已完成。
3.案例
gulp 3.9.1案例
1 const gulp = require('gulp') 2 3 // 0.任务前先清除目录 4 const del = require('del') 5 gulp.task('clean', function (cb) { 6 return del(['./dist'], cb) 7 }) 8 9 // 注意： 10 // 每个任务都返回一个stream, 将会保证clean在任一个任务开始之前完成 11 // clean并不会被执行两次，尽管它被作为依赖调用了两次 12 13 // 1.html 14 const htmlmin = require('gulp-htmlmin') 15 gulp.task('html', function () { 16 return gulp 17 .src('./src/index.html') 18 .pipe( 19 htmlmin({ 20 // collapseWhitespace: true, // 去掉空格 21 removeAttributeQuotes: true // 删除属性的引号 22 }) 23 ) 24 .pipe(gulp.dest('dist/')) 25 .pipe(connect.reload()) 26 }) 27 28 // 2.静态文件 29 gulp.task('images', function () { 30 return gulp 31 .src('./srcimg/**/*.*') 32 .pipe(gulp.dest('dist/images')) 33 .pipe(connect.reload()) 34 }) 35 36 // 3.copy多个文件到一个目录 37 // ! 可以排除一些文件 38 gulp.task('data', function () { 39 return gulp 40 .src(['./src/json/*.json', './src/xml/*.xml', '!./src/xml/old.xml']) 41 .pipe(gulp.dest('dist/data/')) 42 .pipe(connect.reload()) 43 }) 44 45 // 4.添加插件 sass 46 const sass = require('gulp-sass') 47 sass.compiler = require('node-sass') 48 49 gulp.task('sass', function () { 50 return gulp 51 .src('./src/style/**/*.scss') 52 .pipe(sass().on('error', sass.logError)) 53 .pipe(gulp.dest('./src/css/')) 54 .pipe(connect.reload()) 55 }) 56 57 // 5.压缩css插件 及重命名 58 var cssmin = require('gulp-cssmin') 59 var rename = require('gulp-rename') 60 61 gulp.task('cssmin', ['sass'], function () { 62 return gulp 63 .src('./src/css/*.css') 64 .pipe(concat('index.css')) 65 .pipe(cssmin()) 66 .pipe(rename({ suffix: '.min' })) 67 .pipe(gulp.dest('dist/css/')) 68 .pipe(connect.reload()) 69 }) 70 71 // 6.处理js文件 72 // 合并文件 压缩js文件 73 const concat = require('gulp-concat') 74 const babel = require('gulp-babel') 75 const uglify = require('gulp-uglify') 76 77 gulp.task('js', function () { 78 return gulp 79 .src('./src/scripts/*.js') 80 .pipe(concat('index.js')) 81 .pipe( 82 babel({ 83 presets: ['@babel/env'] 84 }) 85 ) 86 .pipe(gulp.dest('dist/js/')) 87 .pipe(uglify()) 88 .pipe(rename('index.min.js')) 89 .pipe(gulp.dest('dist/js/')) 90 .pipe(connect.reload()) 91 }) 92 93 // 7.inject 把压缩后的css和js注入到html中 94 var inject = require('gulp-inject') 95 gulp.task( 96 'inject', ['html', 'images', 'data', 'cssmin', 'js'], 97 function () { 98 return gulp 99 .src('./dist/index.html') // 获取该文件的数据 100 .pipe( 101 inject( 102 gulp.src(['./dist/js/index.min.js', './dist/css/index.min.css'], { 103 // 让获取的流被 inject 操作一次：把指定文件注入到流文件中 104 read: false // 该参数默认为ture,此处fasle也就是并不会去读取文件 105 }), 106 { 107 relative: true // Injecting files relative to target files 108 } 109 ) 110 ) 111 .pipe(gulp.dest('./dist/')) 112 .pipe(connect.reload()) 113 } 114 ) 115 116 // inject说明： 117 // 1.在html中需要标记插入位及文件类型 118 // < !--inject: css-- > 119 // <!-- endinject--> 120 121 // default 默认任务 122 gulp.task( 123 'default', ['inject'], 124 function () { 125 return gulp.src('./dist/**/*.*') 126 } 127 ) 128 129 // default 默认任务 130 gulp.task('build', ['clean', 'default'], function () { 131 console.info('build done!') 132 }) 133 134 // 8.任务监听 135 // 启动服务器 136 const connect = require('gulp-connect') 137 const open = require('open') 138 gulp.task('server', ['default'], function () { 139 connect.server({ 140 root: 'dist/', 141 port: 9001, 142 livereload: true // 实时刷新 143 }) 144 // 注意：需要在各个子任务中添加connect配合 145 146 // 打开浏览器 147 open('http://localhost:9001/') 148 149 // 监听文件 150 gulp.watch('./src/index.html', ['html']) 151 gulp.watch('./src/style/**/*.scss', ['sass', 'cssmin']) 152 gulp.watch('./src/img/**/*', ['images']) 153 gulp.watch(['./src/json/*.json', './src/xml/*.xml', '!./src/xml/old.xml'], ['data']) 154 gulp.watch('./src/scripts/*.js', ['js']) 155 }) 156 157 // 使用时在命令行输入gulp taskname即可，直接输入gulp则运行默认任务