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的强大之处在于可以使用各种插件进行处理，常用有：压缩htmlcssjs及静态图片，转译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则运行默认任务
gulp 4.0.2案例
1 const gulp = require('gulp') 2 3 // 1.处理html 4 const htmlmin = require('gulp-htmlmin') 5 gulp.task('html', () => { 6 return gulp.src('./index.html') 7 .pipe(htmlmin({ 8 // collapseWhitespace: true, // 去除空格 9 removeAttributeQuotes: true // 删除属性的引号 10 })) 11 .pipe(gulp.dest('./dist/')) 12 .pipe(reload({ stream: true })) 13 }) 14 15 // 2.处理sass 16 const sass = require('gulp-sass') 17 sass.compiler = require('node-sass') 18 gulp.task('sass', () => { 19 return gulp.src('./style/*.scss') 20 .pipe(sass().on('error', sass.logError)) 21 .pipe(gulp.dest('./css/')) 22 .pipe(reload({ stream: true })) 23 }) 24 25 // 3.处理css 26 const cssmin = require('gulp-cssmin') 27 const rename = require('gulp-rename') 28 const concat = require('gulp-concat') 29 gulp.task('css', () => { 30 return gulp.src('./css/*.css') 31 .pipe(concat('index.css')) 32 .pipe(cssmin()) 33 .pipe(rename({ suffix: '.min' })) 34 .pipe(gulp.dest('./dist/css/')) 35 .pipe(reload({ stream: true })) 36 }) 37 38 // 4.把压缩后的css和js注入到html中 39 const inject = require('gulp-inject') 40 // inject 注入 41 gulp.task('inject', () => { 42 return gulp.src('./dist/index.html') 43 .pipe(inject(gulp.src(['./dist/css/*.css'], { read: false }), { relative: true })) 44 .pipe(gulp.dest('./dist/')) 45 .pipe(reload({ stream: true })) 46 }) 47 48 // 5.任务监听 49 const browserSync = require('browser-sync') 50 const reload = browserSync.reload 51 gulp.task('default', gulp.series([gulp.parallel([gulp.series('sass', 'css'), 'html']), 'inject'], () => { 52 browserSync({ 53 port: 9001, 54 server: { 55 baseDir: './dist' 56 } 57 }) 58 59 // 监控文件变化 60 // 需要在子任务中添加reload来配合 .pipe(reload({ stream: true })) 61 gulp.watch('./style/*.scss', gulp.series('sass')) 62 gulp.watch('./css/*.css', gulp.series('css')) 63 gulp.watch('./index.html', gulp.series('html')) 64 })) 65 66 // 6.或者这样来写server 67 const connect = require('gulp-connect') 68 const open = require('open') 69 gulp.task('server', gulp.series([gulp.parallel([gulp.series('sass', 'css'), 'html']), 'inject'], () => { 70 const config = { 71 root: './dist', 72 host: '127.0.1.1', 73 port: 9002 74 } 75 connect.server({ 76 ...config, 77 livereload: true 78 }) 79 open('http://' + config.host + ':' + config.port) 80 // 监控文件变化 81 // 需要在各子任务中使用.pipe(connect.reload())配合，代码中使用的是和5中配合的browserSync.reload 82 gulp.watch('./style/*.scss', gulp.series('sass')) 83 gulp.watch('./css/*.css', gulp.series('css')) 84 gulp.watch('./index.html', gulp.series('html')) 85 }))
Rollup
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，相比gulp更适合打包供调用的lib。
1.安装
命令行：
1 npm i rollup -g
2.使用
2.1先创建项目，分别创建src/main.js和src/foo.js文件，
// main.js 2 import foo from './foo.js'; 3 export default function () { 4 console.log(foo); 5 }
1 // foo.js 2 export default 'HelloWorld'
2.2命令行运行
不输出到文件，结果直接在cmd中打印 。-f 参数输出的文件类型 (amd, cjs, esm, iife, umd)
1 rollup src/main.js -f cjs
-o参数表示输出位置
1 rollup src/main.js -o bundle.js -f cjs
会看到生成bundle.js文件，其内容为：
1 'use strict'; 2 3 function main () { 4 console.log(foo); 5 } 6 7 module.exports = main;
2.3使用配置文件
命令行直接传参的方式不够方便，可以在项目根目录下创建rollup.config.js做为配置文件：
1 export default { 2 input: 'src/main.js', 3 output: { 4 file: 'bundle.js', 5 format: 'cjs' 6 } 7 }
这样在命令行中只需要rollup -c即可，-c表明使用配置文件(默认名称rollup.config.js)。
也可以把该命令结合package.json使用：
2.4使用插件
rollup的一些功能需要借助插件，下面rollup-plugin-json为例介绍：
安装：
1 npm install --save-dev rollup-plugin-json
在rollup.config.js中引入插件并放入plugins配置项中:
1 export default { 2 input: 'src/main.js', 3 output: { 4 file: 'bundle.js', 5 format: 'cjs' 6 }, 7 plugins: [json()] 8 }
这样在main中就可以直接从json文件中导入数据了：
1 // main.js 2 import foo from './foo.js'; 3 import {version} from '../package.json' 4 export default function () { 5 console.log(foo); 6 console.info('version:' + version) 7 }
运行rollup后bundle.js文件为：
1 'use strict'; 2 3 var foo = 'HelloWorld'; 4 5 var version = "1.0.0"; 6 7 function main () { 8 console.log(foo); 9 console.info('version:' + version); 10 } 11 12 module.exports = main;
发现只出现了version变量，而没有导入package.json中没有用到的内容，这说明rollup在打包过程中有很好的tree-shaking作用。
总结
gulp适合用未使用脚手架的项目打包，rollup具备tree-shaking且能输出不同模块类型的更适用于js库的打包，如果是vue或react脚手架项目那么首选应是webpack了。