gulp構建前端自動化

目前最知名的構建工具： Gulp、Grunt、NPM + Webpack；

grunt是前端工程化的先驅
gulp更天然基於流的方式鏈接任務
Webpack最年輕，擅長用於依賴管理，配置稍較複雜
推薦使用Gulp，Gulp基於nodejs中stream，效率更好語法更天然,不須要編寫複雜的配置文件

基礎安裝
Gulp是基於Node.js的，須要要安裝Node.js
一、爲了確保依賴環境正確，咱們先執行幾個簡單的命令檢查。

leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ node -v
v4.2.6

Node是一個基於Google V8引擎創建的一個解釋器
檢測Node是否已經安裝，若是正確安裝的話你會看到所安裝的Node的版本號
二、接下來看看npm，它是node的包管理工具，能夠利用它安裝gulp所需的包

leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ npm -v
3.5.2

這一樣能獲得npm的版本號，裝Node時已經自動安裝了npm
三、開始安裝Gulp

npm install -g gulp
leo@leo-HP-Pavilion-dv4-Notebook-PC:~$ gulp -v
[20:37:10] CLI version 3.9.1

獲得gulp的版本號，確認安裝成功
四、切換到你的在項目根文件夾下，運行

npm install gulp --save-dev //將具體的gulp功能插件局部安裝項目下

五、安裝gulp功能插件依賴包

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename--save-dev

gulp功能模塊的文件會放在項目所在的目錄的./node_modules下
六、咱們目前先使用一些簡單的功能:

• 檢查Javascript

• 編譯Sass文件

• 合併Javascript

• 壓縮合並並重命名Javascript
  新建gulpfile.js配置文件放在項目根目錄下，整個項目目錄結構以下:

.
├── .git            經過git進行版本控制,項目自動生成這個文件
├── node_modules    組件包目錄
├── dist    **發佈環境**
│   ├── css        樣式文件(style.css style.min.css)
│   ├── images            圖片文件(壓縮圖片/合併後的圖片)
│   ├── index.html    靜態頁面文件(壓縮html)
│   └── js        js文件(main.js main.min.js)
├── gulpfile.js           gulp配置文件
├── package.json    依賴模塊json文件,在項目目錄下npm install會安裝項目全部的依賴模塊，簡化項目的安裝程序
└── src        **開發環境**
    ├── images        圖片文件
    ├── index.html    靜態文件
    ├── js        js文件
    └── sass        sass文件

如今咱們開始編寫gulpfile.js文件以分配gulp執行任務，gulpfile.js內容以下:

// 引入gulp
var gulp = require('gulp');
// 引入組件
var jshint = require('gulp-jshint');//檢查js
var sass   = require('gulp-sass');  //編譯Sass
var concat = require('gulp-concat');//合併
var uglify = require('gulp-uglify');//壓縮JS
var rename = require('gulp-rename');//重命名
// 檢查js腳本的任務
gulp.task('lint', function() {
    gulp.src('./js/*.js') //可配置檢查腳本的具體名字
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
// 編譯Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});
// 合併，壓縮js文件
// 找到js/目錄下的全部js文件，合併、重命名、壓縮，最後將處理完成的js存放在dist/js/目錄下
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
        console.log('gulp task is done');//自定義提醒信息
});
.... // 其餘任務相似
// 定義默認任務,執行gulp會自動執行的任務
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');
    // 監聽js文件變化，當文件發生變化後會自動執行任務
    gulp.watch('./js/*.js', function(){
        gulp.run('lint','scripts');
    });
});

七、如今，回到命令行窗口，能夠直接運行gulp任務

gulp
這將執行定義的default任務，就和如下的命令式同一個意思
gulp default
固然，咱們能夠運行在gulpfile.js中定義的任意任務，好比，如今單獨運行sass任務：
gulp sass

八、編譯會顯示Finished,若是你的JS有什麼很差的地方它會提醒，避免一些沒必要要的錯誤，十分貼心
常見提醒：

禁止在同一行聲明多個變量
請使用 ===/!==來比較true/false或者數值
使用對象字面量替代new Array這種形式
不要使用全局函數
Switch語句必須帶有default分支
函數不該該有時候有返回值，有時候沒有返回值。
For循環必須使用大括號
If語句必須使用大括號
for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污染

九、gulp的插件數量不少，能夠根據本身的須要進行添加任務
經常使用的gulp插件參考

gulp-imagemin:      壓縮圖片
gulp-ruby-sass:     支持sass，安裝此版本須要安裝ruby
gulp-minify-css:    壓縮css
gulp-jshint:        檢查js
gulp-uglify:        壓縮js
gulp-concat:        合併文件
gulp-rename:        重命名文件
gulp-htmlmin:       壓縮html
gulp-clean:         清空文件夾
gulp-livereload:    服務器控制客戶端同步刷新（需配合chrome插件LiveReload及tiny-lr）