通過前面幾節的准備工作，對於 npm / node / gulp 應該已經有了基本的認識，本節主要介紹如何構建一個基本的前端自動化開發環境。 下面將逐步構建一個可以自動編譯 sass 文件、壓縮 javascript 文件、多終端多瀏覽器同步測試的開發環境，並且還可以通過 piblish 命令對項目下的文件進行打包操作。
相關連接導航
在windows下安裝gulp —— 基於 Gulp 的前端集成解決方案（一）
執行 $Gulp 時發生了什么 —— 基於 Gulp 的前端集成解決方案（二）
一、創建目錄結構
建立如下目錄結構，learn-gulp 作為我們的項目根目錄。
learn-gulp/ ├── app/ │ ├── sass/ │ │ └─ main.scss │ ├── scripts/ │ │ └─ javascript.js │ └── index.html ├── dist/ └── release/
app 為工作目錄，所有操作都在該目錄下進行。gulp 檢測到文件變動會自動對文件進行處理並分發至 dist 目錄。
dist 目標文件目錄，這里是編譯、壓縮過的文件。
release 可以發布至服務器的文件。
二、初始化npm軟件包信息
在 learn-gulp 目錄下執行 npm init。這一步主要是創建一個 package.json 文件，便於與開發團隊其他成員分享當前環境信息。
運行 npm init 會要求輸入項目名稱、版本號、描述、入口程序名稱、關鍵字、作者、license 等信息，根據實際情況輸入即可。下面是我輸入相關信息后生成的 package.json 文件，供參考：
{ "name": "fedis", "version": "1.0.4", "description": "fedis - Front-End development integration solution", "main": "index.js", "keywords": [ "gulp", "sass", "browser-sync", "style", "html" ], "author": "kelsen", "license": "MIT", "bugs": { "url": "" }, "homepage": "", "repository": { "type": "git", "url": "https://github.com/" } }
注意：部分選項可以不填寫，如 git 倉庫選項。
三、安裝 npm 軟件包
通過命令 npm install package-name 安裝 npm 軟件包，建議帶上 --save 參數，這樣就會把你安裝的軟件都記錄在 dependencies 字段下，便於分享你的開發環境給其他人。關於 install 以及 --save 參數的相關信息請參考 NPM 入門 - 基礎使用 。
下面列出了要安裝的軟件包
"dependencies": { "browser-sync": "2.10.0", "browsersync-ssi": "0.2.4", "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-minify": "0.0.5","gulp-plumber": "^1.0.1","gulp-sass": "2.1.0", "gulp-zip": "^3.0.2" }
這些軟件包的基本介紹請參考 常用 Gulp 插件匯總 —— 基於 Gulp 的前端集成解決方案（三） 。
四、構建 gulp 任務
安裝完所有軟件包后，在項目目錄 learn-gulp 中新建一個javascript文件，命名為 gulpfile.js ，在該文件中定義任務。如果要了解更詳細的有關 任務 的信息，請參考 執行 $Gulp 時發生了什么 —— 基於 Gulp 的前端集成解決方案（二）。
1、加載 gulp 插件。
'use strict'; var gulp = require('gulp'), browserSync = require('browser-sync').create(), SSI = require('browsersync-ssi'), concat = require('gulp-concat'), minify = require('gulp-minify'), plumber = require('gulp-plumber'), sass = require('gulp-sass'), zip = require('gulp-zip');
這里注意，第一行的 'use strict';
2、構建一個處理靜態文件的 server ，並監聽工作目錄，當工作目錄有文件變化時立即進行相關操作並執行 browserSync.reload 重新加載頁面。
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir:["./dist"],
middleware:SSI({
baseDir:'./dist',
ext:'.shtml',
version:'2.10.0'
})
}
});
gulp.watch("app/scss/**/*.scss", ['sass']);
gulp.watch("app/scripts/**/*.js", ['js']);
gulp.watch("app/**/*.html", ['html']);
gulp.watch("dist/**/*.html").on("change",browserSync.reload);
});
如有疑問可參考官網文檔：browsersync.io
3、編譯 sass 文件、並自動注入到瀏覽器
// Compile sass into CSS & auto-inject into browsers gulp.task('sass', function() { return gulp.src("app/scss/**/*.scss") .pipe(plumber()) .pipe(sass.sync().on('error', sass.logError)) .pipe(sass({outputStyle:"compact"})) .pipe(gulp.dest("dist/styles")) .pipe(browserSync.stream()); });
這里需要注意 app/scss/**/*.scss ，是 app/scss/ 目錄下所有SCSS文件的意思。
4、壓縮 javascript 文件
// javscript files operate gulp.task('js', function(){ return gulp.src('app/scripts/**/*.js') .pipe(plumber()) .pipe(minify()) .pipe(gulp.dest("dist/scripts")) .pipe(browserSync.stream()); });
對 learn-gulp/app/scripts/ 下的所有 javascript 文件進行壓縮處理並分發至 learn-gulp/dist/scripts/ 目錄下，每個文件都會對應的生成相應的壓縮文件, 如 file.js & file.min.js
5、處理 html 文件
gulp.task('html', function() {
return gulp.src("app/*.html")
.pipe(plumber())
.pipe(gulp.dest("dist/"))
.pipe(browserSync.stream());
});
這里並未對 html 文件做任何改動，你可以根據實際情況進行一些操作。
6、打包發布目標文件
// publish gulp.task('publish', function(){ return gulp.src('dist/**/*') .pipe(plumber()) .pipe(zip('publish.zip')) .pipe(gulp.dest('release')) });
該任務負責把 learn-gulp/dist 目錄下的文件打包成一個 zip 文件並分發至 learn-gulp/release 目錄下。
運行命令 $ gulp publish 可執行該任務。
7、編輯默認任務
gulp.task('default', ['html','serve']);
default 任務是運行 gulp 時執行的第一個任務。我們通過 default 任務來執行 serve 任務。
五、開始工作
1、運行 gulp 命令，如果沒有異常 gulp 就已經開始工作了，瀏覽器會自動打開。
2、打開 learn-gulp/app/scss/main.scss 輸入如下內容
.fedis-main { background-image: linear-gradient(135deg, #573e81, #133259 40%, #133259); color: #FFF; padding: 80px; h1{font-size: 6em; font-family: Arial, Helvetica, sans-serif; text-align: center;font-weight: 100; } } .footer{color:#888 }
當按下 Ctrl+S 保存時，sass 任務會自動執行，執行完成后 learn-gulp/dist/styles/ 目錄下會生成css文件 main.css
3、打開編輯器在 learn-gulp/app/index.html 文件中輸入下面內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Welcome - Fedis</title> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css"> <link rel="stylesheet" href="styles/main.css"> </head> <body> <div class="container" id="main"> <div class="row"> <div class="col-md-12"> <div class="jumbotron text-center fedis-main"> <h1>Fedis</h1> <p>Front-End development integration solution</p> <small> <a class="btn btn-success" href="http://shang.qq.com/wpa/qunwpa?idkey=1aab8e1fc1e992b7390185551e84701163bb9dbdc32a769b185d9f8fd6e70262" target="_blank"><i class="fa fa-qq"></i>加入Q 群<br>221702761</a> </small> </div> <hr> <div class="footer text-center"> <small>Fedis 1.0.0 · Created by Kelsen</small> </div> </div> </div> </div> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="scripts/javascript.js"></script> </body> </html>
此時按下 Ctrl+S 后 learn-gulp/dist/ 下相應位置的 index.html 文件將被新版本替換，緊接着瀏覽器會自動顯示最新效果。
寫在最后
如果您有任何建議或疑問請在下面留言交流。