web前端開發：gulp相關操作
gulp相關操作
前端我們使用gulp來自動化開發流程。配置好gulp後，可以自動給我們處理好一些工作。比如寫完css後，要壓縮成.min.css，寫完js後，要做混淆和壓縮，圖片壓縮等。這些工作都可以讓gulp幫我們完成。
安裝gulp：
- 創建本地包管理環境：
使用npm init命令在本地生成一個package.json文件，package.json是用來記錄你當前這個項目依賴了哪些包，以後別人拿到你這個項目後，不需要你的node_modules文件夾（因爲node_moduels中的包實在太龐大了）。只需要執行npm install命令，即會自動安裝package.json下devDependencies中指定的依賴包。
- 安裝gulp：
gulp的安裝非常簡單，只要使用npm命令安裝即可。但是因爲gulp需要作爲命令行的方式運行，因此需要在安裝在系統級別的目錄中。
npm install gulp -g
因爲在本地需要使用require的方式gulp。因此也需要在本地安裝一份：
npm install gulp --save-dev
以上的–save-dev是將安裝的包的添加到package.json下的devDependencies依賴中。以後通過npm install即可自動安裝。devDependencies這個是用來記錄開發環境下使用的包，如果想要記錄生產環境下使用的包，那麼在安裝包的時候使用npm install xx --save就會記錄到package.json下的dependencies中，dependencies是專門用來記錄生產環境下的依賴包的！
創建gulp任務：
要使用gulp來流程化我們的開發工作。首先需要在項目的根目錄下創建一個gulpfile.js文件。然後在gulpfile.js中填入以下代碼：
var gulp = require("gulp")
gulp.task("greet",function (done) {
console.log("hello world");
done();
});
這裏對代碼進行一一解釋：
-
通過require語句引用已經安裝的第三方依賴包。這個require只能是引用當前項目的，不能引用全局下的。require語法是node.js獨有的，只能在node.js環境下使用。
-
gulp.task是用來創建一個任務。gulp.task的第一個參數是命令的名字，第二個參數是一個函數，就是執行這個命令的時候會做什麼事情，都是寫在這個裏面的。
-
寫完以上代碼後，以後如果想要執行greet命令，那麼只需要進入到項目所在的路徑，然後終端使用gulp greet即可執行。
創建處理css文件的任務：
gulp只是提供一個框架給我們。如果我們想要實現一些更加複雜的功能，比如css壓縮，那麼我們還需要安裝一下gulp-cssnano插件。gulp相關的插件安裝也是通過npm命令安裝，安裝方式跟其他包是一模一樣的（gulp插件本身就是一個普通的包）。對css文件的處理，需要做的事情就是壓縮，然後再將壓縮後的文件放到指定目錄下（不要和原來css文件重合了）！這裏我們使用gulp-cssnano來處理這個工作：
npm install gulp-cssnano --save-dev
然後在gulpfile.js中寫入以下代碼：
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
// 定義一個處理css文件改動的任務
gulp.task("css",function (done) {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./css/dist/"));
done();
});
以上對代碼進行詳細解釋：
gulp.task：創建一個css處理的任務。
gulp.src：找到當前css目錄下所有以.css結尾的css文件。
pipe：管道方法。將上一個方法的返回結果傳給另外一個處理器。比如以上的cssnano。
gulp.dest：將處理完後的文件，放到指定的目錄下。不要放在和原文件相同的目錄，以免產生衝突，也不方便管理
修改文件名：
像以上任務，壓縮完css文件後，最好是給他添加一個.min.css的後綴，這樣一眼就能知道這個是經過壓縮後的文件。這時候我們就需要使用gulp-rename來修改了。當然首先也需要安裝
npm install gulp-rename --save-dev
示例代碼如下：
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function (done) {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./css/dist/")) });
done();
在上述代碼中，我們增加了一行.pipe(rename({“suffix”:".min"}))，這個我們就是使用rename方法，並且傳遞一個對象參數，指定修改名字的規則爲添加一個.min後綴名。這個gulp-rename還有其他的指定文件名的方式，比如可以在文件名前加個前綴等。更多的教程可以看這個：https://www.npmjs.com/package/gulp-rename
創建處理js文件的任務：
處理js文件，我們需要使用到gulp-uglify插件。安裝命令如下：
npm install gulp-uglify --save-dev
安裝完後，我們就可以對js文件進行處理了。示例代碼如下：
var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task("js",function (done) {
gulp.src("./js/*.js")
.pipe(uglify())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js/"));
done();
});
這裏就是增加了一個.pipe(uglify())的處理，對js文件進行壓縮和醜化（修改變量名）等處理。更多關於gulp-uglify的教程。請看：https://github.com/mishoo/UglifyJS2#minify-options。