Gulp與Rollup的簡單介紹

時間 2020-08-11

原文原文鏈接

Gulp

gulp是基於流的任務化構建工具，讀取源文件後在管道中經過一系列插件進行壓縮、處理而後輸出到目標地址。css

1.使用html

須要node環境，先全局安裝gulp-clivue

1 npm install --global gulp-cli

cmd進入項目目錄，分別輸入node

1 npm init
2 npm i gulp -D

根目錄下建立gulpfile.js文件，在該文件中配置gulp任務，下面以壓縮html文件爲例介紹：react

 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 -Dwebpack

在命令行中輸入gulp 任務名便可，如：es6

1 gulp html

此時查看dist目錄，已經生成了壓縮好的html:web

<!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輸出到目標位置。npm

2.主要功能json

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保證任務已完成。

參考： http://www.javashuo.com/article/p-ctpnbcln-hb.html

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;