寫一份gulp常用配置檔案，構建前端工作流
阿新 • • 發佈：2018-11-17
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
目錄
前言
上回寫了一篇關於《一份gulp的配置檔案》的文章。其中已經提及了簡單專案中gulp的配置。
在使用實踐的過程中，發現這樣的一份配置並不太“友好”，沒有區分開發環境和生產環境。在實際中，開發過程中並不需要把所有東西都做到面面俱到，如：必須壓縮CSS、JS檔案等操作。我們可以在真正釋出到生產環境的時候再進行這樣的操作。在這裡，讀者可以先參考《入門：十分鐘自動化構建——jack_lo》一文。
建立專案
初始化專案
進入到專案目錄，使用如下命令初始化專案：
npm init
- 1
當然，也可以直接建立一個package.json檔案，內容如下：
{ "name": "Gulp-Workflow", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "gulp dev", "dev": "gulp dev", "clean": "rimraf dist", "build": "rimraf dist && gulp build" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.18.6", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-concat": "^2.6.1", "gulp-cssnano": "^2.1.2", "gulp-imagemin": "^3.1.1", "gulp-jshint": "^2.0.4", "gulp-rename": "^1.2.2", "gulp-sass": "^3.0.0", "gulp-uglify": "^2.0.0", "jshint": "^2.9.4" }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
其中scripts中定義的是當前專案下的一些npm指令碼操作，後續將要提及。而devDependencies則顯然是該專案所需的依賴。
通過如下命令下載依賴：
npm install
- 1
建立目錄結構
我們在專案中建立一個src目錄，作為專案的源。而建立dist目錄作為原始檔打包後存放的位置，建立build目錄放置gulp的另外一些配置檔案。如下：
- project |- build |- dist // 打包資料夾 |- src // 原始檔夾 | |- assets // 放置一些第三方檔案，如bootstrap | |- css | | `- index.css | |- images | |- js | | `- index.js | |- sass | | `- index.scss |- gulpfile.js `- package.json
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
編寫Gulp配置
建立gulp的config檔案
我們在build資料夾中可以建立一個 gulpfile.config.js 檔案，主要用途為儲存專案的目錄配置，如原始檔存放的路徑，打包後文件存放的路徑等，可以進行靈活配置。同時將Config對應暴露出來供其他檔案引用。
gulpfile.config.js
var SRC_DIR = './src/'; // 原始檔目錄 var DIST_DIR = './dist/'; // 檔案處理後存放的目錄 var DIST_FILES = DIST_DIR + '**'; // 目標路徑下的所有檔案 var Config = { src: SRC_DIR, dist: DIST_DIR, dist_files: DIST_FILES, html: { src: SRC_DIR + '*.html', dist: DIST_DIR }, assets: { src: SRC_DIR + 'assets/**/*', // assets目錄：./src/assets dist: DIST_DIR + 'assets' // assets檔案build後存放的目錄：./dist/assets }, css: { src: SRC_DIR + 'css/**/*.css', // CSS目錄：./src/css/ dist: DIST_DIR + 'css' // CSS檔案build後存放的目錄：./dist/css }, sass: { src: SRC_DIR + 'sass/**/*.scss', // SASS目錄：./src/sass/ dist: DIST_DIR + 'css' // SASS檔案生成CSS後存放的目錄：./dist/css }, js: { src: SRC_DIR + 'js/**/*.js', // JS目錄：./src/js/ dist: DIST_DIR + 'js', // JS檔案build後存放的目錄：./dist/js build_name: 'build.js' // 合併後的js的檔名 }, img: { src: SRC_DIR + 'images/**/*', // images目錄：./src/images/ dist: DIST_DIR + 'images' // images檔案build後存放的目錄：./dist/images } };module.exports = Config;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
建立gulp的dev檔案
在build資料夾下建立gulpfile.dev.js檔案，該檔案放置的時開發環境下呼叫的任務，同時使用browser-sync實現編寫程式的時候瀏覽器自動重新整理的功能。
gulpfile.dev.js
var gulp = require('gulp');var autoprefixer = require('gulp-autoprefixer'); // 處理css中瀏覽器相容的字首 var rename = require('gulp-rename'); //重新命名 var cssnano = require('gulp-cssnano'); // css的層級壓縮合並var sass = require('gulp-sass'); //sassvar jshint = require('gulp-jshint'); //js檢查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1） var uglify = require('gulp-uglify'); //js壓縮 var concat = require('gulp-concat'); //合併檔案 var imagemin = require('gulp-imagemin'); //圖片壓縮 var browserSync = require('browser-sync').create();var reload = browserSync.reload;var Config = require('./gulpfile.config.js');//======= gulp dev 開發環境下 ===============function dev() { /** * HTML處理 */ gulp.task('html:dev', function () { return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist)).pipe(reload({ stream: true })); }); /** * assets資料夾下的所有檔案處理 */ gulp.task('assets:dev', function () { return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist)).pipe(reload({ stream: true })); }); /** * CSS樣式處理 */ gulp.task('css:dev', function () { return gulp.src(Config.css.src).pipe(gulp.dest(Config.css.dist)).pipe(reload({ stream: true })); }); /** * SASS樣式處理 */ gulp.task('sass:dev', function () { return gulp.src(Config.sass.src).pipe(sass()).pipe(gulp.dest(Config.sass.dist)).pipe(reload({ stream: true })); }); /** * js處理 */ gulp.task('js:dev', function () { return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(gulp.dest(Config.js.dist)).pipe(reload({ stream: true })); }); /** * 圖片處理 */ gulp.task('images:dev', function () { return gulp.src(Config.img.src).pipe(imagemin({ optimizationLevel: 3 , progressive: true , interlaced: true })).pipe(gulp.dest(Config.img.dist)).pipe(reload({ stream: true })); }); gulp.task('dev', ['html:dev', 'css:dev', 'sass:dev', 'js:dev', 'assets:dev', 'images:dev'], function () { browserSync.init({ server: { baseDir: Config.dist } , notify: false }); // Watch .html files gulp.watch(Config.html.src, ['html:dev']); // Watch .css files gulp.watch(Config.css.src, ['css:dev']); // Watch .scss files gulp.watch(Config.sass.src, ['sass:dev']); // Watch assets files gulp.watch(Config.assets.src, ['assets:dev']); // Watch .js files gulp.watch(Config.js.src, ['js:dev']); // Watch image files gulp.watch(Config.img.src, ['images:dev']); });}//======= gulp dev 開發環境下 ===============module.exports = dev;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
在該檔案中建立瞭如html:dev、css:dev、sass:dev等幾個任務（具體任務實現了什麼功能，聰明的你應該看得出來~），這幾個任務被放置在dev函式中，並且將dev函式暴露出去。至於為啥這麼做嘛，後面會知道的。
其中一個主要的gulp任務 dev（同時也是生產環境下沒有的gulp任務），開啟了一個browserSync伺服器，同時監聽各個資原始檔的變化，當檔案發生變化後通知瀏覽器進行重新重新整理。
使用gulp dev命令就可以進入開發模式咯~~（當然現在還不行，你騙我呢。因為dev方法還未被呼叫。）
建立gulp的prod檔案
在build資料夾下建立gulpfile.prod.js檔案，用於放置生產環境下執行的任務。其中在生產環境下，我們並不需要使用到什麼瀏覽器自動重新整理的功能，只要進行如壓縮CSS、JS檔案等操作即可。
gulpfile.prod.js
var gulp = require('gulp');var autoprefixer = require('gulp-autoprefixer'); // 處理css中瀏覽器相容的字首 var rename = require('gulp-rename'); //重新命名 var cssnano = require('gulp-cssnano'); // css的層級壓縮合並var sass = require('gulp-sass'); //sassvar jshint = require('gulp-jshint'); //js檢查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1） var uglify = require('gulp-uglify'); //js壓縮 var concat = require('gulp-concat'); //合併檔案 var imagemin = require('gulp-imagemin'); //圖片壓縮 var Config = require('./gulpfile.config.js');//======= gulp build 打包資源 ===============function prod() { /** * HTML處理 */ gulp.task('html', function () { return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist)); }); /** * assets資料夾下的所有檔案處理 */ gulp.task('assets', function () { return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist)); }); /** * CSS樣式處理 */ gulp.task('css', function () { return gulp.src(Config.css.src).pipe(autoprefixer('last 2 version')).pipe(gulp.dest(Config.css.dist)).pipe(rename({ suffix: '.min' })).pipe(cssnano()) //執行壓縮 .pipe(gulp.dest(Config.css.dist)); }); /** * SASS樣式處理 */ gulp.task('sass', function () { return gulp.src(Config.sass.src).pipe(autoprefixer('last 2 version')).pipe(sass()).pipe(gulp.dest(Config.sass.dist)).pipe(rename({ suffix: '.min' })) //rename壓縮後的檔名 .pipe(cssnano()) //執行壓縮 .pipe(gulp.dest(Config.sass.dist)); }); /** * js處理 */ gulp.task('js', function () { return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(gulp.dest(Config.js.dist)).pipe(rename({ suffix: '.min' })).pipe(uglify()).pipe(gulp.dest(Config.js.dist)); }); /** * 合併所有js檔案並做壓縮處理 */ gulp.task('js-concat', function () { return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(concat(Config.js.build_name)).pipe(gulp.dest(Config.js.dist)).pipe(rename({ suffix: '.min' })).pipe(uglify()).pipe(gulp.dest(Config.js.dist)); }); /** * 圖片處理 */ gulp.task('images', function () { return gulp.src(Config.img.src).pipe(imagemin({ optimizationLevel: 3 , progressive: true , interlaced: true })).pipe(gulp.dest(Config.img.dist)); }); gulp.task('build', ['html', 'css', 'sass', 'js', 'assets', 'images']);}module.exports = prod;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
同樣在gulpfile.prod.js檔案中將所有的任務放置在了prod函式中，同時暴露該函式供外部呼叫。
使用gulp build命令就可以實現資源的打包咯~~（當然現在還不行，你又騙我呢。因為prod方法還未被呼叫。）
呼叫dev和prod方法
在真正的gulp配置檔案gulpfile.js中，引入gulpfile.dev.js和gulpfile.prod.js檔案，並呼叫dev和prod方法，這樣對應環境下的各個任務即被創建出來了。
gulpfile.js
/** * Created by DreamBoy on 2017/1/8. */var prod = require('./build/gulpfile.prod.js');var dev = require('./build/gulpfile.dev.js');prod();dev();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
執行gulp
這個時候，我們可以使用gulp dev命令進行開發模式，此時會監聽專案src中檔案的變化，執行對應的任務，與此同時會通知瀏覽器進行重新整理，及時響應。
而使用gulp build命令則可以針對生產環境的要求打包資原始檔，用於生產。
定義指令碼scripts
注意到，我們在gulp build命令之前並沒有執行什麼刪除原來dist目錄的檔案的操作，這樣實在不太好呀。（如果沒有先進行刪除操作的話，可能在開發環境下生成了許多不需要的檔案，此時進行打包仍會保留到這些檔案。）並且有些時候，我們需要有一個clean的能力——清除所有打包後的檔案。
這還不簡單，直接到dist目錄下，手動把所有檔案都刪除就行啦。呃，這種方式給旁邊的妹紙看到會覺得很low嘞。
那我們換種炫酷一點的方式。注意到之前package.json檔案中的scripts嗎？在這裡就是定義指令碼的地方。如：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "gulp dev", "dev": "gulp dev", "clean": "rimraf dist", "build": "rimraf dist && gulp build"}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
其中，主要的有：
1. 定義了start指令碼，用於執行gulp dev命令；
2. 定義了dev指令碼，同樣用於執行gulp dev命令；
3. 定義了clean指令碼，用於執行rimraf dist命令（刪除dist目錄下的所有檔案）；
4. 定義了build指令碼，用於執行rimraf dist命令，還有gulp build命令，實際上就是先刪除dist目錄下的所有檔案，然後再打包生成各資原始檔。
需要rimraf，我們必須先進行全域性安裝：
npm install rimraf -g
- 1
這樣我們在實際裝逼使用過程中：
1. 使用npm start命令將對應執行gulp dev命令；
2. 使用npm run dev命令將對應執行gulp dev命令；
3. 使用npm run clean命令將刪除所有生成後的檔案；
4. 使用npm run build命令可以先刪除生成後的檔案，再重新打包生成。
附錄
另外在gulp中建立了一個js和js:dev任務，其中使用jshint對js進行了校驗，需要在專案根目錄下建立 .jshintrc檔案，檔案內容如下：
{ "es5": true, "node": true, "bitwise": false, "camelcase": false, "curly": false, "eqeqeq": false, "forin": true, "strict": false, "freeze": true, "immed": true, "indent": 4, "latedef": true, "newcap": true, "noarg": true, "noempty": false, "nonbsp": true, "nonew": true, "plusplus": false, "undef": true, "trailing": true, "debug": false, "funcscope": true, "laxcomma": false, "loopfunc": true, "onevar": false, "unused": true}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
自動建立基礎目錄結構
（2017-10-10 應博友問題，補充初始化專案目錄結構的實現）
初始目錄和檔案
- project |- build | |- gulpfile.config.js | |- gulpfile.dev.js | |- gulpfile.init.js | |- gulpfile.prod.js |- gulpfile.js `- package.json
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
安裝mkdirp外掛
使用mkdirp外掛來建立目錄，先該外掛：
cnpm install mkdirp --save-dev
- 1
安裝成功後，package.json 如下：
{ "name": "Gulp-Workflow", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "gulp dev", "dev": "gulp dev", "clean": "rimraf dist", "build": "rimraf dist && gulp build" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.18.6", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-concat": "^2.6.1", "gulp-cssnano": "^2.1.2", "gulp-imagemin": "^3.1.1", "gulp-jshint": "^2.0.4", "gulp-rename": "^1.2.2", "gulp-sass": "^3.0.0", "gulp-uglify": "^2.0.0", "jshint": "^2.9.4", "mkdirp": "^0.5.1" }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
補充配置，建立初始化任務
修改gulp.config.js檔案中的配置，新增dir屬性 ，用來宣告不同檔案所在目錄的路徑。如下：
var SRC_DIR = './src/'; // 原始檔目錄 var DIST_DIR = './dist/'; // 檔案處理後存放的目錄 var DIST_FILES = DIST_DIR + '**'; // 目標路徑下的所有檔案 var Config = { src: SRC_DIR, dist: DIST_DIR, dist_files: DIST_FILES, html: { dir: SRC_DIR, src: SRC_DIR + '*.html', dist: DIST_DIR }, assets: { dir: SRC_DIR + 'assets', src: SRC_DIR + 'assets/**/*', // assets目錄：./src/assets dist: DIST_DIR + 'assets' // assets檔案build後存放的目錄：./dist/assets }, css: { dir: SRC_DIR + 'css', src: SRC_DIR + 'css/**/*.css', // CSS目錄：./src/css/ dist: DIST_DIR + 'css' // CSS檔案build後存放的目錄：./dist/css }, sass: { dir: SRC_DIR + 'sass', src: SRC_DIR + 'sass/**/*.scss', // SASS目錄：./src/sass/ dist: DIST_DIR + 'css' // SASS檔案生成CSS後存放的目錄：./dist/css }, js: { dir: SRC_DIR + 'js', src: SRC_DIR + 'js/**/*.js', // JS目錄：./src/js/ dist: DIST_DIR + 'js', // JS檔案build後存放的目錄：./dist/js build_name: 'build.js' // 合併後的js的檔名 }, img: { dir: SRC_DIR + 'images', src: SRC_DIR + 'images/**/*', // images目錄：./src/images/ dist: DIST_DIR + 'images' // images檔案build後存放的目錄：./dist/images } };module.exports = Config;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
在前面的初始化目錄和檔案中，我們可以發現，多了一個檔案gulpfile.init.js，用來定義init任務。
gulpfile.init.js，如下：
var gulp = require('gulp');var mkdirp = require('mkdirp');var Config = require('./gulpfile.config.js');//======= gulp init 初始化專案結構 ===============function init() { /** * 初始化專案結構 */ gulp.task('init', function () { var dirs = [Config.html.dir, Config.assets.dir, Config.css.dir, Config.sass.dir, Config.js.dir, Config.img.dir]; dirs.forEach(dir => { mkdirp.sync(dir); }); });}module.exports = init;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
呼叫init任務
修改gulpfile.js檔案，呼叫init任務，如下：
/** * Created by DreamBoy on 2017/1/8. */var init = require('./build/gulpfile.init.js');var prod = require('./build/gulpfile.prod.js');var dev = require('./build/gulpfile.dev.js');init();prod();dev();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
執行初始化
執行如下命令後，我們可以發現專案下自動建立了對應src目錄結構。
gulp init
- 1
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
