完整的Gulp安裝及檔案配置
什麼是Gulp？
gulp.js是基於流的自動化構建工具。
前置知識需求：
node.js的一些基礎用法
npm的基礎用法，如init、install、run等
瞭解gulp.js的Api（內容很少，掌握五個Api就可以了）
安裝gulp的步驟流程：
1、新建專案資料夾（例如D盤下新建hbPage資料夾），啟用cmd
2、進入專案檔案，全域性安裝Gulp
npm install -g gulp
3、建立package.json檔案，執行下面程式碼
npm init
4、在目錄檔案下建立gulpfile.js檔案
外掛的安裝與gulpfile.js檔案的配置
下面的檔案配置就比較多了，我們來一一進行說明。（所有的配置項都是寫在gulpfile.js檔案中的）
關於gulp檔案配置，因為在打包部署到伺服器上線時，為了減少檔案大小我們要對檔案進行壓縮。所以這裡涉及到三個壓縮外掛（js、css、html）
1、js檔案壓縮（gulp-gulify）
npm install --save-dev gulp-uglify
2、css檔案壓縮（gulp-clean-css）
npm install --save-dev gulp-clean-css
3、html檔案壓縮（gulp-minify-html）
npm install --save-dev gulp-minify-html
在編輯頁面樣式時，我們會用到 less 或者 sass 編譯。（我這裡使用的是less編譯，兩個編譯檔案根據個人喜好只需要使用其中一個即可）
4、less 和 sass 編譯（gulp-minify-html）（二者選擇安裝其一即可）
npm install --save-dev gulp-less
另外還要用到圖片壓縮外掛。
5、圖片壓縮（gulp-imagemin）
npm install --save-dev gulp-imagemin
在編寫程式碼時為了實現網頁自動重新整理我們使用 gulp-connect 外掛，當前的流行的是前後端分離，所以為了跟後臺做對接，實現跨域代理，這裡也要使用一個跟 gulp-connect 配套使用的外掛 http-proxy-middleware 。
6、網頁自動重新整理（gulp-connect）
npm install --save-dev gulp-connect
7、跨域代理（http-proxy-middleware）
npm install --save-dev http-proxy-middleware到這裡基本上一般專案安裝這些外掛就可以了，當然還有一些其他的外掛我也會在下面整理到，如果你需要用到的話也可以自行安裝。
8、重新命名（gulp-rename）
npm install --save-dev gulp-rename
9、自動載入外掛（gulp-load-plugins）
（然後我們要使用gulp-rename和gulp-ruby-sass這兩個外掛的時候，就可以使用plugins.rename和plugins.rubySass來代替了,也就是 原始外掛名去掉gulp-字首，之後再轉換為駝峰命名。）
npm install --save-dev gulp-load-plugins
10、檔案合併（gulp-concat）
npm install --save-dev gulp-concat接下來開始講解gulpfile相關檔案的配置
本來只需要在gulpfile.js檔案中配置就行，但是實際過程中我們在開發環境中是不需要進行檔案的打包。在生產環境中是不需要進行網頁自動重新整理和跨域代理配置的。所以我們把開發環境和生產環境的配置區分開來，分別寫一個配置檔案。
講一下到目前為止專案的目錄結構是這樣的：
建立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檔案build後存放的目錄：./dist/assets
},
css: {
src: SRC_DIR + 'css/**/*.css', // CSS目錄：./src/css/
src_min: SRC_DIR + 'css', // CSS壓縮檔案目錄：./src/css/
dist: DIST_DIR + 'css' // CSS檔案build後存放的目錄：./dist/css
},
less: {
src: SRC_DIR + 'less/**/*.less', // less目錄：./src/less/
dist: DIST_DIR + 'css' // less檔案生成CSS後存放的目錄：./dist/css
},
js: {
src: SRC_DIR + 'js/**/*.js', // JS目錄：./src/js/
src_min: SRC_DIR + '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;
建立gulp的dev檔案
在build資料夾下建立gulpfile.dev.js檔案，該檔案放置的時開發環境下呼叫的任務，同時使用gulp-connect實現編寫程式的時候瀏覽器自動重新整理的功能。
gulpfile.dev.js
var gulp = require('gulp');
autoprefixer = require('gulp-autoprefixer'); // 處理css中瀏覽器相容的字首
less = require('gulp-less'); //less編譯
rename = require('gulp-rename'); //重新命名
concat = require('gulp-concat'); //合併檔案
imagemin = require('gulp-imagemin'); //圖片壓縮
connect = require('gulp-connect'); //瀏覽器自動重新整理
reload = connect.reload; //瀏覽器自動重新整理
proxy = require('http-proxy-middleware'); //跨域代理
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());
});
/**
* assets資料夾下的所有檔案處理
*/
gulp.task('assets:dev', function () {
return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist)).pipe(reload());
});
/**
* CSS樣式處理
*/
gulp.task('css:dev', function () {
return gulp.src(Config.css.src).pipe(gulp.dest(Config.css.dist)).pipe(reload());
});
/**
* less樣式處理
*/
gulp.task('less:dev', function () {
return gulp.src(Config.less.src).pipe(less()).pipe(rename({
suffix: '.min'
})).pipe(gulp.dest(Config.css.src_min)).pipe(reload());
});
/**
* js處理
*/
gulp.task('js:dev', function () {
return gulp.src(Config.js.src).pipe(gulp.dest(Config.js.dist)).pipe(reload());
});
/**
* 圖片處理
*/
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());
});
gulp.task('dev', ['html:dev', 'css:dev', 'less:dev', 'js:dev', 'assets:dev', 'images:dev'], function () {
connect.server({
root: ['./'],
port:8090,
livereload:true,
middleware: function(connect, opt) {
return [
proxy('/hb-controller', {
target: 'http://192.168.1.7:8080',
changeOrigin:true
}),
/*proxy('/hb', {
target: 'http://192.168.0.102:8080/hb-controller',
changeOrigin:true
}),*/
proxy('/otherServer', {
target: 'http://IP:Port',
changeOrigin:true
})
]
}
});
// Watch .html files
gulp.watch(Config.html.src, ['html:dev']);
// Watch .css files
gulp.watch(Config.css.src, ['css:dev']);
// Watch .less files
gulp.watch(Config.less.src, ['less: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;在該檔案中建立瞭如html:dev、css:dev、less:dev等幾個任務（具體任務實現了什麼功能，聰明的你應該看得出來~），這幾個任務被放置在dev函式中，並且將dev函式暴露出去。
其中一個主要的gulp任務 dev（同時也是生產環境下沒有的gulp任務），開啟了一個gulp-connect伺服器，同時監聽各個資原始檔的變化，當檔案發生變化後通知瀏覽器進行重新重新整理。 還有一個就是開啟了跨域代理服務，方便跟後臺做對接。
上面的 connect.server 中 middleware 配置的是代理資訊，不懂得可以去查查跨域代理是怎樣配置的。
建立gulp的prod檔案
在build資料夾下建立gulpfile.prod.js檔案，用於放置生產環境下執行的任務。其中在生產環境下，我們並不需要使用到什麼瀏覽器自動重新整理的功能，只要進行如壓縮CSS、JS檔案等操作即可。
gulpfile.prod.js
var gulp = require('gulp');
minifyHtml = require("gulp-minify-html"); // html壓縮
autoprefixer = require('gulp-autoprefixer'); // 處理css中瀏覽器相容的字首
rename = require('gulp-rename'); //重新命名
cleanCss = require("gulp-clean-css"); // css的層級壓縮合並
less = require('gulp-less'); //less編譯
uglify = require('gulp-uglify'); //js壓縮
concat = require('gulp-concat'); //合併檔案
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(minifyHtml()).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(cleanCss()).pipe(gulp.dest(Config.css.dist));
});
/**
* less樣式處理
*/
gulp.task('less', function () {
return gulp.src(Config.less.src).pipe(autoprefixer('last 2 version')).pipe(less()).pipe(gulp.dest(Config.css.dist)).pipe(rename({
suffix: '.min'
})).pipe(cleanCss()).pipe(gulp.dest(Config.css.dist));
});
/**
* js處理
*/
gulp.task('js', function () {
return gulp.src(Config.js.src).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(concat(Config.js.build_name)).pipe(gulp.dest(Config.js.dist)).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', 'less', 'js', 'assets', 'images']);
}
module.exports = prod;同樣在gulpfile.prod.js檔案中將所有的任務放置在了prod函式中，同時暴露該函式供外部呼叫。
呼叫dev和prod方法
在真正的gulp配置檔案gulpfile.js中，引入gulpfile.dev.js和gulpfile.prod.js檔案，並呼叫dev和prod方法，這樣對應環境下的各個任務即被創建出來了。
gulpfile.js
var prod = require('./build/gulpfile.prod.js');
var dev = require('./build/gulpfile.dev.js');
prod();
dev();執行gulp
這個時候，我們可以使用gulp dev命令進行開發模式，此時會監聽專案src中檔案的變化，執行對應的任務，與此同時會通知瀏覽器進行重新整理，及時響應。 而使用gulp build命令則可以針對生產環境的要求打包資原始檔，用於生產。
定義指令碼scripts
編寫 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. 定義了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. 使用npm start命令將對應執行gulp dev命令；
2. 使用npm run dev命令將對應執行gulp dev命令；
3. 使用npm run clean命令將刪除所有生成後的檔案；
4. 使用npm run build命令可以先刪除生成後的檔案，再重新打包生成。