Gulp与Rollup的简单介绍

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保证任务已完成。

参考：https://segmentfault.com/a/1190000005357048

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则运行默认任务

View Code

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 }))

View Code

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了。