基於gulp編寫的一個簡單實用的前端開發環境

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

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

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

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

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

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

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

cnpm install gulp

好了，安裝完Gulp后，接下來是你大展身手的時候了，在你自己的電腦上面隨便哪個地方建一個目錄，打開命令行，然后進入創建好的目錄里面，開始擼代碼,關於生成的json文件請點擊這里https://docs.npmjs.com/files/package.json，打開的速度看你的網速了,以下是為了演示 ，我建的一個目錄結構，你自己可以根據項目需求自己建目

win+R鍵（windows平台上）、Mac和Linux操作系統上，自己度娘；
cd yourFilename （ 進入你的文件目錄 ）
npm init ( 初始化 )

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

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

命令行運行 npm/cnpm install gulp  --save-dev
--save-dev ( 你安裝的包會出現在你開發(dev)的依賴(Dependencies)里),這樣方便以后你的項目如果別人也用的話，那么那個人只要 npm/cnpm install 一下,OK所以的插件都安裝了，你不需要拷貝給他

到了這一步，在編輯器中打開剛才新建的gulpfile.js文件，寫入如下的代碼進行測試

var gulp = require('gulp');
gulp.task('test',function(){

     console.log('gulp 測試成功了!!'

 })

在命令行運行 gulp test 回車 如果看到了控制台輸出了那句話，OK,你的gulp的測試成功

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

命令行: npm/cnpm install gulp-content-includer --save-dev 在gulpfile.js 寫如下的代碼:
var gulp = require('gulp');//  引入 gulp
var contentIncluder = require('gulp-content-includer')
var rev = require('gulp-rev-append');
gulp.task('html', function() {
  gulp.src(['src/module/**/*.html','!src/module/public/html/*.html'])
    .pipe(contentIncluder({
          includerReg:/<!\-\-include\s+"([^"]+)"\-\->/g
     }))
     .pipe(rev())
     .pipe(gulp.dest('dest/'))
     .pipe(browserSync.stream());
});

注意:以下是為了演示 ，我建的一個目錄結構，你自己可以根據項目需求自己建目錄結構！！！！！！！！！！！！！（最后我會將源文件放到 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）

命令行: npm/cnpm install gulp-postcss cssnex precss  gulp-autoprefixer gulp-minify-css gulp-sourcemaps  --save-dev

    在gulpfile.js 寫如下的代碼:

    gulp.task('css', function () {

         var processors = [

            autoprefixer,

            cssnext,

           precss
        ];
                   gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])
              .pipe(postcss(processors))
             .pipe(autoprefixer({
                 browsers: ['last 2 versions', 'Android >= 4.0'],
                 cascade: true
            }))
          .pipe(gulp.dest('dest/'))
           .pipe(browserSync.stream());
      })
            

我們在login模塊下面新建一個css文件如圖所示，寫上代碼

在命令行運行: gulp css 在dest目錄下打開剛才編譯成功的樣式文件 如圖所示編譯成功

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

gulp.task('css', function () {
     var processors = [
        autoprefixer,
        cssnext,
       precss
    ];
             gulp.src(['src/module/**/css/*.css','src/module/public/css/*.css'])
   .pipe(postcss(processors))
   .pipe(autoprefixer({
        browsers: ['last 2 versions', 'Android >= 4.0'],
         cascade: true
    }))
     .pipe(minifycss())    
     .pipe(sourcemaps.init())    
     .pipe(sourcemaps.write())    
      .pipe(gulp.dest('dest/'))    
     .pipe(browserSync.stream());
  })
我們再次編譯你會發現生成的文件變了，變成下面這個樣子了，要的就是這個效果

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

命令行: npm/cnpm install gulp-babel gulp-uglify  --save-dev

在gulpfile.js 寫如下的代碼:

      gulp.task('js', function () {  
          gulp.src(['src/module/**/js/*.js','!src/module/public/js/*.js'])    
         .pipe(babel({      
            presets: ['es2015']   
                  }))    
                 .pipe(uglify({  
                   mangle: true, //fasle不混淆變量名 true為混淆      
                   preserveComments: 'some' //不刪除注釋，還可以為 false（刪除全部注釋），some（保留@preserve @license @cc_on等注釋）    }))    
                  .pipe(gulp.dest('dest/'))    
                  .pipe(browserSync.stream())    
                 .pipe(browserSync.stream());
       });

我們在login模塊下面新建一個js文件如圖所示，寫上如圖代碼

在命令行運行: gulp js 在dest目錄下打開剛才編譯成功的樣式文件 如圖所示

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

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

命令行: npm/cnpm install gulp-imagemin  --save-dev

      在gulpfile.js 寫如下的代碼:
  
     gulp.task('images', function () {
         gulp.src(['src/module/**/images/*.*','src/module/public/images/*.*'])
            .pipe(imagemin({
                  optimizationLevel: 3,
                  interlaced: true,
                  progressive: true
            }))
            .pipe(gulp.dest('dest/'))
            .pipe(browserSync.stream());
    });


在login目錄下放入一張圖片，然后命令行運行 gulp images 然后對比壓縮前后圖片的大小，就知道有沒有成功了

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

在項目中我們通常會依賴一些插件和js庫，通常這些文件都是被編譯壓縮過后的，不需要再次編譯壓縮，所以我們直接拷貝過去就可以

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

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

文件的自動編譯壓縮監聽服務`browser-sync：http://www.browsersync.cn/

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

 

命令行: npm/cnpm install browser-sync  --save-dev

    在gulpfile.js 寫如下的代碼:

    gulp.task('serve', ['css',"html","copyJs","js","images"], function() {
            browserSync.init({
                server: "./dest"
            });
            gulp.watch("src/module/**/css/*.scss", ['css']);
            gulp.watch("src/module/**/*.html", ['copyHtml']);
            gulp.watch("src/module/public/**/*", ['copyJs']);
            gulp.watch("src/module/**/js/*.js", ['js']);
            gulp.watch("src/module/**/images/*.*", ['images']);
            gulp.watch("*.html").on('change', browserSync.reload);
    });

 

到這里為止我們就差不多了，最后還有一個收尾工作，那就是用一個命令運行所有的任務，代碼如下：

 

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

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

代碼運行：

1、運行npm install

2、運行gulp

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