自從Node.js出現以來，基於其的前端開發的工具框架也越來越多了，從Grunt到Gulp再到現在很火的WebPack，所有的這些新的東西的出現都極大的解放了我們在前端領域的開發，作為一個在前端領域裡打滾了兩年的文藝小碼農來說，也有自己的一些體會，今天就來分享一下自己基於Gulp編寫的一個比較醜陋的前端開發環境，本人技術有限，有問題和意見請私下聊，勿噴：

　　首先安裝Node.js,至於怎麼安裝的話 ，自行度娘。安裝完成之後在命令列裡面輸入下面兩個命令，如果輸出了版本號的話（這個是我自己電腦上的版本），OK那麼恭喜你安裝成功了

1 node -v   v6.2.0
2 npm  -v   v3.8.9

安裝好了Node環境後，接下來你應該通過npm來安裝Gulp了

1 npm install gulp -g
2 -g 代表的是全域性安裝，這樣你到時候再任何目錄下都可以跑gulp命令

但是你會發現在這個過程中可能會安裝失敗，為什麼呢？，作為一個IT人員，在偉大的天朝 ，你懂得...，但是也不要灰心，人是高階動物，總歸想到辦法來解決的，這得感謝我們的馬爸爸了，因為他的淘寶團隊提供了一個映象http://npm.taobao.org/，

在這裡你可以通過改變映象源來快速的安裝自己所需要的東西了，這個時候一般是通過如下的命令安裝了

1 cnpm install gulp

好了，安裝完Gulp後，接下來是你大展身手的時候了，在你自己的電腦上面隨便哪個地方建一個目錄，開啟命令列，然後進入建立好的目錄裡面，開始擼程式碼,關於生成的json檔案請點選這裡

1 win+R鍵（windows平臺上）、Mac和Linux作業系統上，自己度娘；
2 cd yourFilename （ 進入你的檔案目錄 ）
3 npm init ( 初始化 )

完了你就直接一直按回車鍵，當看到你的目錄裡面生成一個以.json格式結尾的檔案時，OK你的初始化就完成了接著你在根目錄下新建一個名叫gulpfile.js的js檔案，我也不知道為啥叫這個名字，反正就是這樣規定的， 先前gulp安裝是在全域性環境下，

那麼現在gulp的安裝就是在你目錄下面安裝了

1 命令列執行 npm/cnpm install gulp  --save-dev
2 --save-dev ( 你安裝的包會出現在你開發(dev)的依賴(Dependencies)裡),這樣方便以後你的專案如果別人也用的話，那麼那個人只要 npm/cnpm install 一下,OK所以的外掛都安裝了，你不需要拷貝給他

到了這一步，在編輯器中開啟剛才新建的gulpfile.js檔案，寫入如下的程式碼進行測試

1 var gulp = require('gulp');
2 gulp.task('test',function(){
3 
4      console.log('gulp 測試成功了!!'
5 
6  })
7 
8 在命令列執行 gulp test 回車 如果看到了控制檯輸出了那句話，OK,你的gulp的測試成功

好了到了上面這一步我們的準備工作都差不多了，我們接下來就來一個一個的安裝外掛，以及外掛的基本使用，最後完成我們這個簡單但實用的開發環境。關於Gulp的完整使用請點選這裡http://www.gulpjs.com.cn/,這裡不再講解
對於一個專案來說的話，通常離不開模板編譯、打包壓縮，自動化部署等操作步驟，但是在這裡我們重點講解前面兩項，好了回到命令列，開始擼程式碼，首先一個是html檔案的編譯依賴我們第一個使用的外掛是 ``gulp-content-includer gulp-rev-append``,在html檔案中匯入一些公共的模組和為頁面中引入的js。css、img加上版本號

 1 命令列: npm/cnpm install gulp-content-includer --save-dev 在gulpfile.js 寫如下的程式碼:
 2 var gulp = require('gulp');//  引入 gulp
 3 var contentIncluder = require('gulp-content-includer')
 4 var rev = require('gulp-rev-append');
 5 gulp.task('html', function() {
 6   gulp.src(['src/module/**/*.html','!src/module/public/html/*.html'])
 7     .pipe(contentIncluder({
 8           includerReg:/<!\-\-include\s+"([^"]+)"\-\->/g
 9      }))
10      .pipe(rev())
11      .pipe(gulp.dest('dest/'))
12      .pipe(browserSync.stream());
13 });

注意:以下是為了演示 ，我建的一個目錄結構，你自己可以根據專案需求自己建目錄結構！！！！！！！！！！！！！（最後我會將原始檔放到 github 上面，到時可以下載）

在根目錄下新建一個src目錄，再在src目錄下面建一個module目錄，在這個module目錄裡面放不同的模組包括公共的模組，比如我們這裡有一個登入模組。那麼我們新建一個login資料夾，裡面放與登入相關的頁面和靜態檔案，可能還會用到一些公共的，那麼我們再建一個公共的資料夾叫public，這裡面放公共的資料夾如圖所示:

public目錄下面我們新建了幾個資料夾分別用來放公共的css、images、js、html，我們在login模組下新建一個index.html檔案，分別引入頭部和底部,如圖所示:

在命令列執行: gulp html 完了後會在目錄下多出一個檔案，開啟剛才編譯過的html檔案你會看到完整的編譯成功 如圖所示

那大家會問.pipe(rev())這個是幹嘛的呢，這個是為js、css、img新增檔案版本號的，如下圖所示，

我們會發現引入的檔案後面都多了一個版本號了，這個是為了防止瀏覽器產生快取，只要檔案改變，hash值會自動變，至此我們的第一個外掛搞定

Html完了的話，應該是輪到css了吧，網上有很多都是關於怎麼樣用gulp去編譯sass等檔案，這裡我要講的是我們postcsss 點選去學習postcss吧http://www.w3cplus.com/blog/tags/516.html，去編寫我們的css，然後編譯，廢話不多說，上程式碼

我們第二個，當然不止了，需要很多個配合使用 ``gulp-postcss（主要依賴模組） cssnex（使用CSS未來的語法） precss（編寫Sass的函式） gulp-autoprefixer（處理瀏覽器私有字首）gulp-sourcemaps（用於錯誤查詢） gulp-minify-css（壓縮css）

 1 命令列: npm/cnpm install gulp-postcss cssnex precss  gulp-autoprefixer gulp-minify-css gulp-sourcemaps  --save-dev
 2 
 3     在gulpfile.js 寫如下的程式碼:
 4 
 5     gulp.task('css', function () {
 6 
 7          var processors = [
 8 
 9             autoprefixer,
10 
11             cssnext,
12 
13            precss
14         ];
15                    gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])
16               .pipe(postcss(processors))
17              .pipe(autoprefixer({
18                  browsers: ['last 2 versions', 'Android >= 4.0'],
19                  cascade: true
20             }))
21           .pipe(gulp.dest('dest/'))
22            .pipe(browserSync.stream());
23       })
24             

我們在login模組下面新建一個css檔案如圖所示，寫上程式碼

在命令列執行: gulp css 在dest目錄下開啟剛才編譯成功的樣式檔案 如圖所示編譯成功

上面只搞定了編譯，那還有壓縮，錯誤定位怎麼辦。我們再把剛才的程式碼稍微改一下

 1 gulp.task('css', function () {
 2      var processors = [
 3         autoprefixer,
 4         cssnext,
 5        precss
 6     ];
 7              gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])
 8    .pipe(postcss(processors))
 9    .pipe(autoprefixer({
10         browsers: ['last 2 versions', 'Android >= 4.0'],
11          cascade: true
12     }))
13      .pipe(minifycss())    
14      .pipe(sourcemaps.init())    
15      .pipe(sourcemaps.write())    
16       .pipe(gulp.dest('dest/'))    
17      .pipe(browserSync.stream());
18   })
19 我們再次編譯你會發現生成的檔案變了，變成下面這個樣子了，要的就是這個效果

到此，css部分完成了,CSS部分完成了，該輪到JS了吧，js部分我主要依賴於這幾個外掛 `` gulp-babel（編譯es6語法） gulp-uglify（壓縮js）``

 1 命令列: npm/cnpm install gulp-babel gulp-uglify  --save-dev
 2 
 3 在gulpfile.js 寫如下的程式碼:
 4 
 5       gulp.task('js', function () {  
 6           gulp.src(['src/module/**/js/*.js','!src/module/public/js/*.js'])    
 7          .pipe(babel({      
 8             presets: ['es2015']   
 9                   }))    
10                  .pipe(uglify({  
11                    mangle: true, //fasle不混淆變數名 true為混淆      
12                    preserveComments: 'some' //不刪除註釋，還可以為 false（刪除全部註釋），some（保留@preserve @license @cc_on等註釋）    }))    
13                   .pipe(gulp.dest('dest/'))    
14                   .pipe(browserSync.stream())    
15                  .pipe(browserSync.stream());
16        });

我們在login模組下面新建一個js檔案如圖所示，寫上如圖程式碼

在命令列執行: gulp js 在dest目錄下開啟剛才編譯成功的樣式檔案 如圖所示

出現這樣的結果就成功了，是不是覺得很簡單啊

現在該輪到了圖片了吧，圖片也很簡單，我們只用到了一個外掛``gulp-imagemin( 圖片壓縮 )``

 1 命令列: npm/cnpm install gulp-imagemin  --save-dev
 2 
 3       在gulpfile.js 寫如下的程式碼:
 4   
 5      gulp.task('images', function () {
 6          gulp.src(['src/module/**/images/*.*','src/module/public/images/*.*'])
 7             .pipe(imagemin({
 8                   optimizationLevel: 3,
 9                   interlaced: true,
10                   progressive: true
11             }))
12             .pipe(gulp.dest('dest/'))
13             .pipe(browserSync.stream());
14     });
15 
16 
17 在login目錄下放入一張圖片，然後命令列執行 gulp images 然後對比壓縮前後圖片的大小，就知道有沒有成功了

拷貝public下面不需要編譯的一些庫和外掛:

在專案中我們通常會依賴一些外掛和js庫，通常這些檔案都是被編譯壓縮過後的，不需要再次編譯壓縮，所以我們直接拷貝過去就可以

1 gulp.task('copyJs', function() {
2            gulp.src('src/module/public/js/**/*',{base: 'src/module/public/'})
3              .pipe(uglify({
4             mangle: true, //fasle不混淆變數名 true為混淆
5                 preserveComments: 'some' //不刪除註釋，還可以為 false（刪除全部註釋），some（保留@preserve @license @cc_on等註釋）
6              }))
7             .pipe(gulp.dest('dest/public'))
8             .pipe(browserSync.stream());
9     });

不知道大家有沒有注意,每一個任務後面的加上了.pipe(browserSync.stream())；這個是幹嘛的呢，這就是接下來我們要講到的，到這裡是不是就完了呢？當然沒有，我們寫程式碼的時候不可能每次都去手動編譯吧，那個太LOW了，我們要自動監聽檔案的編譯壓縮，對，就是這樣

檔案的譯壓縮監聽服務我們依賴於``browser-sync(實時重新整理)``這個外掛通過這個外掛我們可以在本地開啟一個小的服務環境，每當檔案改變的時候 ，就會自動處理，具體的使用請點選上面的連結，時間的原因就不在一一描述了

 1 命令列: npm/cnpm install browser-sync  --save-dev
 2 
 3     在gulpfile.js 寫如下的程式碼:
 4 
 5     gulp.task('serve', ['css',"html","copyJs","js","images"], function() {
 6             browserSync.init({
 7                 server: "./dest"
 8             });
 9             gulp.watch("src/module/**/css/*.scss", ['css']);
10             gulp.watch("src/module/**/*.html", ['copyHtml']);
11             gulp.watch("src/module/public/**/*", ['copyJs']);
12             gulp.watch("src/module/**/js/*.js", ['js']);
13             gulp.watch("src/module/**/images/*.*", ['images']);
14             gulp.watch("*.html").on('change', browserSync.reload);
15     });

到這裡為止我們就差不多了，最後還有一個收尾工作，那就是用一個命令執行所有的任務，程式碼如下：

gulp.task('default', ['serve'])

前端工程話要做的事情有很多，不只是上面一點點，我作為一個剛入門的前端工程師花點時間來寫這個東西，只是為了和大家共勉，後期我會繼續完善程式碼，最後附上原始碼https://github.com/huangzexia/gulp，更多問題請給我發郵件（[email protected]），在github上下載下來後按照下面的命令

程式碼執行：

1、執行npm install

2、執行gulp

3、在瀏覽器中輸入http://localhost:3000/login/index.html```