自動化構建工具Gulp基礎使用指南

時間 2019-11-08

原文原文鏈接

Gulp說明：

Gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器，基於node.js，它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用它，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。咱們在編寫的過程當中一般都是團隊協做，這裏咱們就能夠經過Gulp提交代碼，實現代碼的統一。javascript

Gulp安裝：

1. 進入項目所在目錄，使用npm安裝gulp-cli腳手架工具（腳手架設置全局安裝，方便其餘項目使用）css

安裝完成後，可經過gulp -v查看gulp版本信息 html

2. 安裝gulp到項目中（-s表示寫入到dependencies）前端

此時項目目錄中自動加了package-lock.json文件java

默認只添加了package-lock.json文件，沒有package.json文件node

需手動執行npm init，並輸入相關設置建立package.json文件npm

package.json文件中內容以下：json

 1 {
 2   "name": "gulp-demo",
 3   "version": "1.0.0",
 4   "description": "gulp-demo",
 5   "main": "index.js",
 6   "dependencies": {
 7     "gulp": "^4.0.2"
 8   },
 9   "devDependencies": {},
10   "scripts": {
11     "test": "echo \"Error: no test specified\" && exit 1"
12   },
13   "author": "",
14   "license": "ISC"
15 }

View Code

3. 按需安裝須要使用的插件gulp

經常使用插件有以下：sass

gulp-clean：用於清理;
gulp-notify：用於打印消息文本;
gulp-rename：用於修更名字;
gulp-concat：用於合併文件;
gulp-zip：用於生成一個zip壓縮包;
gulp-minify-css：用於壓縮css;
gulp-autoprefixer：用於給css添加前綴;
gulp-imagemin：用於給圖片進行優化;
gulp-uglify：用於壓縮js;
amd-optimize：用於amd模塊引用編譯；
gulp-import-css：若是css文件是經過import導入的可使用此插件進行合併優化;
gulp-rev-replace：用於替換;
gulp-useref：引入使用build標記，進行替換;
gulp-rev：生成md5文件名;
gulp-filter：對文件進行過濾;
gulp-header：壓縮以後將註釋寫入到文件的頭部
gulp-if：進行邏輯判斷
gulp-size：獲取文件大小
gulp-less：編譯less文件
gulp-sass：編譯sass文件
gulp-file-include：對文件進行引入
gulp-sourcemaps：生成map文件
gulp-livereload：自動刷新
gulp-clean-css：css壓縮
browserSync：啓動server並啓動熱更新
gulp-plumber : 監測工做流，報錯，防止遇到錯誤時直接退出gulp
gulp-rev : 文件名添加版本號
gulp-css-spritesmith：根據css文件自動生成雪碧圖

若是要查找gulp插件，通常有兩個地方：

安裝完所需插件後（-s 安裝），package.json 文件內容自動改變

 1 {
 2   "name": "gulp-demo",
 3   "version": "1.0.0",
 4   "description": "gulp-demo",
 5   "main": "index.js",
 6   "dependencies": {
 7     "gulp": "^4.0.2",
 8     "gulp-clean-css": "^4.2.0",
 9     "gulp-concat": "^2.6.1",
10     "gulp-notify": "^3.2.0",
11     "gulp-rename": "^1.4.0",
12     "gulp-uglify": "^3.0.2"
13   },
14   "devDependencies": {},
15   "scripts": {
16     "test": "echo \"Error: no test specified\" && exit 1"
17   },
18   "author": "",
19   "license": "ISC"
20 }

View Code

配置文件：

建立 gulpfile 文件，並寫入相關配置

 1 var gulp = require('gulp'),                 // gulp基礎庫
 2     notify = require('gulp-notify'),        // 提示
 3     concat = require('gulp-concat'),        // 合併文件
 4     rename = require('gulp-rename'),        // 文件重命名
 5     uglify = require('gulp-uglify'),        // js壓縮
 6     cleancss = require('gulp-clean-css')    // css壓縮
 7 
 8 
 9 // css處理
10 gulp.task('minifycss', function () {
11     return gulp
12         .src([
13             './css/style-1.css',
14             './css/style-2.css'
15         ])
16         .pipe(concat('all.css')) //合併css文件到"all.css"
17         .pipe(gulp.dest('./dist')) //設置輸出路徑
18         .pipe(rename({ suffix: '.min' })) //修改文件名
19         .pipe(cleancss()) //壓縮文件
20         .pipe(gulp.dest('./dist')) //輸出文件目錄
21         .pipe(notify({ message: 'minifycss task ok' })) //提示成功
22 })
23 
24 // js處理
25 gulp.task('minifyjs', function () {
26     return gulp
27         .src([
28             './js/javascript-1.js',
29             './js/javascript-2.js'
30         ]) //選擇合併的JS
31         .pipe(concat('all.js')) //合併js
32         .pipe(gulp.dest('./dist')) //輸出
33         .pipe(rename({ suffix: '.min' })) //重命名
34         .pipe(uglify()) //壓縮
35         .pipe(gulp.dest('./dist')) //輸出
36         .pipe(notify({ message: 'minifyjs task ok' })) //提示
37 })
38 
39 
40 // 先建立Task，後使用
41 gulp.task('default',
42     gulp.series(gulp.parallel(
43         'minifycss',
44         'minifyjs'
45         )
46     )
47 )

gulpfile.js

執行Task：

執行 gulp，進行自動化構建

執行成功輸入提示信息，

並將構建後的文件生成到指定目錄

測試效果：

測試構建後的文件

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>Gulp Demo</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6     <link href="./dist/all.min.css" type="text/css" rel="stylesheet" />
 7     <script src="./dist/all.min.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10     <div class="div-1"
11          onclick="clickDiv1();">
12         Div 1
13     </div>
14     <div class="div-2"
15          onclick="clickDiv2();">
16         Div 2
17     </div>
18 </body>
19 </html>