從零開始，教你如何開始前端自動化

爲何要前端自動化

什麼是前端自動化構建就不說了，應爲我不是寫書的。在前端開發實踐中，大公司都會有本身的基礎前端架構，能容包括了開發環境、代碼管理，代碼質量，性能檢測，命令行工具，開發規範，開發流程，前端架構及性能優化。相對而言，小公司或則是創業型的公司，前端架構這塊作得就相對沒有這麼好，甚至於很不規範，而規範的目的在於提高工做效率。

而規範須要必定的過程，咱們就先從代碼質量，代碼管理上入手。

1. 對代碼（html，css，js）進行語法檢查

2. 對圖片，代碼進行壓縮

3. 對sass。less 的css預處理器進行編譯

4. 指望代碼有改動後，能自動刷新頁面

5. ...

這些操做，咱們能夠經過人工來完成，可是效率真的低到沒朋友，難道語法檢查你要本身一行一行的review，或則是拜託你的同事幫你一行一行的 review 麼。若是你讓我作這個，我確定和你絕交...可是 review 的目的是幫助咱們寫出高質量的代碼。這是必不可少的，因此咱們指望能有一個自動幫咱們實現代碼檢測壓縮的工具。只要一個命令，你就能輕鬆的實現代碼壓縮，圖片壓縮，css預處理器編譯等原來須要你去人工完成的任務，是否是爽到爆炸。

在項目自動化構建工具中，你們用得比較多的，分別是grunt，gulp。與這些自動化工具配套的包管理工具呢，一般還有npm。node包含了npm的包，因此只要你的系統裏安裝的 node，你就能夠在你的控制檯裏經過 npm install 來安裝你的項目依賴。還有的就是最近流行起來的 webpack 模塊管理工具,你們對webpack 的反應也很好，因此咱們打算在項目開發的時候把 gulp 和 webpack 一塊兒用起來，並把研究後的搭建流程寫成教程。此次分享的是gulp的搭建，下次等個人後臺項目開始用 webpack 的時候，再來分享一篇。

從零開始搭建 gulp 前端自動化

1. 安裝node.js

2. npm init 生成package文件，或則你能夠本身手動生成

3. 在控制檯中輸入 npm install --save-dev gulp命令，在項目中安裝gulp

4. 配置gulp任務

5. 在控制檯中輸入 gulp或則gulp default測試你的gulp任務

6. 配置你真正須要的 gulp 任務，（壓縮，代碼質量檢查，瀏覽器自動刷新）

var gulp = require('gulp');
gulp.task('default',function(){
    console.log("hello")
});

#####瀏覽器自動刷新

1. 在你的谷歌瀏覽器裏安裝插件。關鍵字livereload

2. 經過命令mpn install gulp-livereload --save-dev來安裝依賴

3. 在gulp文件中引入livereload = require('gulp-livereload'),

4. 在gulp的watch任務中經過 livereload.listen([options])啓動刷新服務

5. 定義的任務在最後加入一個工做流.pipe(livereload()),

6. 在啓動後進入到這個任務後，開啓谷歌插件，就能自動刷新瀏覽器了

   #gulpfile.js 文件

   var gulp = require('gulp'),
      uglify = require('gulp-uglify'),
      livereload = require('gulp-livereload'),

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

   return gulp.src('js/test.js')
          .pipe(uglify())
          .pipe(gulp.dest('build'))
          .pipe(livereload())

   });

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

   livereload.listen();
      gulp.watch('js/test.js', ['test']);

   });

   當你修改你的test.js 文件以後，ctrl + s 保存，你就能夠看到時時刷新。

7.代碼壓縮

1.經過命令`mpn install gulp-uglify --save-dev`來安裝依賴(js 壓縮)
2.經過命令`mpn install gulp-concat --save-dev`來安裝依賴(合併壓縮後的文件到一個文件)

    #gulpfile.js 文件

    uglify = require('gulp-uglify'),

    gulp.task('compress',function(){
    return gulp.src('js/servers/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(livereload())
});

8.同理css壓縮，生成雪碧圖等task，代碼質量檢查，都是一樣的先安裝依賴，再引用，編寫task

若是你想深刻學習

我理想中的前端工做流
gulp 中文網
livereload
gulp-livereloadulp-livereload)