摘要：今天跟大家分享的是關(guān)于目前自己的公司的項(xiàng)目?jī)?yōu)化中所使用到的構(gòu)建工具。在進(jìn)行基礎(chǔ)鞏固的基礎(chǔ)上，使用構(gòu)建工具可以在開(kāi)發(fā)的過(guò)程中進(jìn)行部分自動(dòng)化構(gòu)建，如對(duì)頁(yè)面的監(jiān)聽(tīng)，對(duì)樣式的編譯，對(duì)代碼的壓縮與打包。在使用之前，要先對(duì)所需要的依賴進(jìn)行安裝。

今天跟大家分享的是關(guān)于目前自己的公司的項(xiàng)目?jī)?yōu)化中所使用到的gulp構(gòu)建工具。目前公司對(duì)產(chǎn)品的優(yōu)化決定采用VueJs來(lái)進(jìn)行單頁(yè)面開(kāi)發(fā)，無(wú)疑這種新的技術(shù)框架對(duì)一個(gè)項(xiàng)目的效率會(huì)提升得更快更強(qiáng)。如今前端的發(fā)展速度飛快，仿佛稍微停止學(xué)習(xí)的腳步就會(huì)被時(shí)代拋棄，但我們也切忌過(guò)于急躁，所謂萬(wàn)卷不離其宗，打好基礎(chǔ)是關(guān)鍵。

在進(jìn)行基礎(chǔ)鞏固的基礎(chǔ)上，使用gulp構(gòu)建工具可以在開(kāi)發(fā)的過(guò)程中進(jìn)行部分自動(dòng)化構(gòu)建，如對(duì)頁(yè)面的監(jiān)聽(tīng)，對(duì)樣式的編譯，對(duì)代碼的壓縮與打包。
作為一個(gè)小型的項(xiàng)目來(lái)說(shuō)，這些基本就足夠了。
搭建gulp最主要的是使用gulp的工作流，通過(guò)在gulp中的gulpfile文件編寫(xiě)我們的工作流，就仿佛一個(gè)個(gè)車間，在我們一條條命令下，就能完成我們需要的工作。

1.安裝NodeJs

首先，最基本也最重要的是，我們需要搭建node環(huán)境。訪問(wèn)http://nodejs.org，下載完成后直接運(yùn)行程序，就一切準(zhǔn)備就緒。npm會(huì)隨著安裝包一起安裝。
為了確保Node已經(jīng)正確安裝，我們執(zhí)行幾個(gè)命令。

node -v

如果正確安裝的話，你會(huì)看到所安裝的Node的版本號(hào)，接下來(lái)看看npm。

npm -v

這同樣能得到npm的版本號(hào)。
如果這兩行命令沒(méi)有得到返回，可能node就沒(méi)有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進(jìn)行重裝。
安裝成功后我們就可以在目標(biāo)目錄中初始化環(huán)境

npm init

使用上述代碼在項(xiàng)目空間中初始化環(huán)境，按步驟填寫(xiě)后會(huì)生成package.json文件

2.安裝gulp

使用npm工具下載gulp。在命令行中輸入

sudo npm install -g gulp 

使用下面的命令查看gulp的版本號(hào)以確保gulp已經(jīng)被正確安裝。

gulp -v 

接下來(lái)，我們需要將gulp安裝到項(xiàng)目本地

npm install —-save-dev gulp

這里，我們使用—-save-dev來(lái)更新package.json文件，更新devDependencies值，以表明項(xiàng)目需要依賴gulp。
Dependencies可以向其他參與項(xiàng)目的人指明項(xiàng)目在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境中的node模塊依懶關(guān)系，想要更加深入的了解它可以看看package.json文檔。

3.gulpfile文檔編寫(xiě)

在這里使用我在項(xiàng)目中使用的gulpfile文件。

// 引入 gulp
var gulp = require("gulp");

// 引入組件
var jshint = require("gulp-jshint"); //語(yǔ)法檢查
var sass = require("gulp-sass"); //sass編譯
var concat = require("gulp-concat"); //合并
var uglify = require("gulp-uglify"); //js壓縮
var rename = require("gulp-rename"); //重命名
var htmlmin = require("gulp-htmlmin"); //頁(yè)面壓縮
var minifyCss = require("gulp-minify-css"); //css壓縮
var rev = require("gulp-rev"); //對(duì)文件名加MD5后綴
var revCollector = require("gulp-rev-collector"); //路徑替換
var cheerio = require("gulp-cheerio"); //替換引用


// 默認(rèn)任務(wù) 
gulp.task("default", ["sass", "lint"]);
// 開(kāi)發(fā)環(huán)境gulp任務(wù)
gulp.task("watch", function() {
    // gulp.watch("./src/index.html", ["sass", "lint"]);
    gulp.watch("./src/scss/*.scss", ["sass"]);
    gulp.watch("./src/js/*.js", ["lint"]);
});
// 檢查腳本 
gulp.task("lint", function() {
    gulp.src("./src/js/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter("default"));
});
// 編譯Sass 
gulp.task("sass", function() {
    gulp.src("./src/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./src/css"));
});



// // 生產(chǎn)環(huán)境gulp任務(wù)
gulp.task("dev", ["cssConcat", "scripts"]);
// js合并，壓縮文件 
gulp.task("scripts", function() {
    gulp.src("./src/js/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./dist/js"))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest("./dist/js"))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest("./rev/js/"));
});
// css合并壓縮
gulp.task("cssConcat", function() {
    gulp.src("./src/css/**.css")
        .pipe(concat("style.min.css"))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest("./dist/css"))
        .pipe(rev.manifest({merge: true}))
        .pipe(gulp.dest("./rev/css/"));
});
//改變引用文件
gulp.task("rev", function() {
    gulp.src(["./rev/css/rev-manifest.json", "./rev/js/rev-manifest.json", "./dist/index.html"])
        .pipe(revCollector()) 
        .pipe(gulp.dest("./dist/"));
});
gulp.task("indexHtml", function() {
    return gulp.src("index.html")
        .pipe(cheerio(function ($) {
            $("script").remove();
            $("link").remove();
            $("body").append("");
            $("head").append("");
        }))
        .pipe(gulp.dest("dist/"));
});
//壓縮html文件
gulp.task("minify", function() {
    return gulp.src("dist/*.html")
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest("./dist/"));
});

基本上在這樣的工作流程中，代碼的壓縮合并，監(jiān)聽(tīng)發(fā)布都可以使用gulp流來(lái)控制。
在使用gulpfile之前，要先對(duì)所需要的依賴進(jìn)行安裝。使用npm對(duì)依賴進(jìn)行下載，這里下載的就是文件中所require引用的依賴，這里就不將全部寫(xiě)下來(lái)了。

npm i gulp-jshint --save-dev

gulp的工作流程十分簡(jiǎn)單，主要用task，run，watch，dest來(lái)進(jìn)行任務(wù)搭建。

task主要作為任務(wù)的新建，即像我文件中所寫(xiě)的

run起運(yùn)行任務(wù)的命令

watch起監(jiān)聽(tīng)命令，作為對(duì)工程中文件的變化起監(jiān)聽(tīng)作用，這一點(diǎn)如果再搭配頁(yè)面重加載效果，即gulp-connect依賴，則可以實(shí)現(xiàn)頁(yè)面無(wú)需手動(dòng)刷新操作

dest主要是對(duì)文件的路徑進(jìn)行更改

更多詳細(xì)的可以參考gulp的官網(wǎng)。熟悉了就趕緊嘗試起來(lái)吧，趁年輕，大膽試錯(cuò)。

下一次的分享可能會(huì)收集在論壇上所了解到的一些我經(jīng)常在項(xiàng)目中看見(jiàn)的代碼，同時(shí)也是作為自己一個(gè)技術(shù)積累，與大家一起學(xué)習(xí)。CU tomorrow

我的技術(shù)博客主要以github上創(chuàng)建的一個(gè)倉(cāng)庫(kù)為主，因?yàn)榍岸苏搲嗔?，我無(wú)從下手，所以一般都會(huì)先在github上整理完后再分發(fā)到各個(gè)社區(qū)，有興趣請(qǐng)戳
? MolyCHNs Blogger