前端工具系列之一 Gulp

從(大約)2014年開始,前端再也不是當初那個切圖排版的前端了，各類MV*框架、庫、工具呈井噴之勢層出不窮。構建工具比較有名的如Grunt、Gulp、Yeoman、webpack；依賴管理好比bower、npm，固然最流行最廣爲人知的仍是做爲Nodejs的管理器npm；模塊化出現了CMD、AMD、UMD等，例如requirejs、seajs等的。

固然，許多技術、技術思惟等出現的時代甚至能夠追溯至上個世紀。但進入大衆視線，並逐步投產的時代卻爲時尚早。

做爲一個怕麻煩的懶人，對於前端的繁雜工做固然是要找一個自動化工具來處理，因而我遇到了Gulp。做爲自動化工具，Gulp常常被拿來和Grunt比較，孰優孰劣不能一律而論，畢竟每一個人關注的地方也不同。關於Gulp與Grunt的對比，網絡上有許多總結好的特色，有興趣的能夠去搜索查看閱讀，我在這裏就不湊字數了。

要使用Gulp，首先要作的第一步固然是要安裝她啦！Gulp是基於NodeJs的一個自動化構建工具，既然是基於NodeJs了，那麼安裝Gulp以前天然要保證你已經安裝了NodeJS，這裏我會從安裝NodeJS開始。

我這裏使用Ubuntu 16.04 LTS版本做爲主機環境，其餘版本的請自行注意差別。Windows相對Ubuntu來講就更簡單了，相信難不到你們。

首先咱們來安裝NodeJS。Ubuntu下安裝Linux有兩種方案，一是採用APT安裝，但此辦法並無自動安裝NPM，須要手動安裝；第二種方案則是下載Nodejs源碼，自行編譯安裝。這裏採用懶省事的辦法——APT。

sudo apt-get install nodejs-legacy npm

回車以後，輸入密碼，APT就會自動幫你把Nodejs、npm安裝好了。當安裝過程結束後回到命令指引時候，能夠輸入nodejs -v 和 npm -v 來檢查安裝結果。

注意：Ubutun中，NodeJS的包名有兩個nodejs和nodejs-legacy,而不是node。

若是一切順利，安裝Gulp的前置步驟已經完成了。接下來咱們安裝Gulp，Gulp是做爲NodeJS的一個模塊存在的，所以安裝的時候要用到NPM。

sudo npm install -g gulp

這一步結束以後，Gulp安裝就結束了。接下來就到了關鍵時刻啦，配置Gulp的task，Gulp雖然是自動化構建工具，但仍是須要咱們來給她指定task，讓她安裝咱們指定的task來工做，她還沒聰明到猜想咱們要作什麼、怎麼作。

Gulp的API較之Grunt少的多，僅僅只有4個。

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name [, deps] [, fn])
gulp.watch(glob [, opts], tasks) || gulp.watch(glob [, opts, cb])

依靠這4個API和衆多的Gulp 插件，咱們就能實現許多咱們須要的功能。在編寫Gulp任務以前，咱們首先要在當前目錄安裝Gulp。

sudo npm install --save-dev gulp

一切準備工做已經就緒，下面咱們就進入主題，咱們就來寫一個簡單的Gulp任務文件。
在當前目錄建立一個空的文件，名字叫作gulpfile.js。

var gulp = require('gulp');

gulp.task('default', function(){
    console.log("task default done");    
});

將以上代碼保存在gulpfile.js裏。而後在命令行終端裏進入當前目錄,在命令行終端裏輸入gulp。gulp會自動查找當前目錄中的gulpfile.js,而後分析gulpfile中的任務列表，命令行中若是沒參數，則默認執行 default 任務，若是指定，則執行指定的任務。

正常狀況下，將會在終端中看到

task default done

這行輸出，而且還有每一個任務開始時間和結束時間。

以上就是一個簡單的Gulp 任務，下面我會把我經常使用的配置發出來。我通常使用到的有幾個功能。

1. SASS編譯壓縮

2. JS壓縮

3. browerSync(改動文件自動刷新HTML和CSS、JS等)

gulpfile內容以下

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    cssMinify = require("gulp-cssnano"),
    browserSync = require('browser-sync').create(),
    compass = require('gulp-compass'),
    paths = {
        scripts: ['js/*.js'],  // JS文件路徑
        css: 'sass/*.scss', // scss 文件路徑
    };

gulp.task('scripts', function() {
    return gulp.src(paths.scripts) // 讀取JS文件
        .pipe(uglify()) // 壓縮
        .pipe(gulp.dest('script/'))  //將壓縮後的文件保存到 script目錄
        .pipe(browserSync.stream()); // 通知browserSync 重載 JS文件
});

gulp.task("css", function() {
    return gulp.src(paths.css)  // 讀取SCSS文件
        .pipe(compass({
            sass: 'sass',
            image: 'images'
        })) // 進行編譯處理
        .pipe(cssMinify()) // 壓縮CSS文件
        .pipe(gulp.dest('css/')) // 發佈到css 目錄
        .pipe(browserSync.stream()); // 通知browserSync刷新CSS文件
});

// 註冊serve 任務，serve任務依賴scrips 和 css 兩個任務
gulp.task('serve', ['scripts', "css"], function() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.css, ["css"]);
    gulp.watch("*.html").on("change", browserSync.reload);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['serve']);  // 將serve 任務註冊爲默認任務。

在這個任務清單中，須要依賴如下插件。

gulp-uglify
gulp-cssnano
browser-sync
gulp-compass

在使用中，直接進入到當前目錄中，在終端中運行gulp,將會啓動一個http服務，而且打開瀏覽器窗口。

服務啓動後，不管你修改CSS、JS仍是HTML，都會自動編譯壓縮而且自動刷新HTML(若是須要，修改CSS、JS是不須要刷新整個頁面，只會從新加載CSS、JS)。

好了，亂七八糟的這個Gulp教程到這裏算是馬馬虎虎的收尾了。其實Gulp 仍是蠻強大的，仍是有許多內容沒提到的，Gulp的API、插件的API這些都沒有去講解，去看一下文檔你們應該就明白了。

固然，這個配置仍是有不足的，Gulp官方推薦的一些最佳實踐都沒應用到，甚至一些功能也沒有完成，好比圖片壓縮、公用模板引用。

圖片壓縮能夠去查看一下gulp-imagemin,公共模板引用gulp-content-includer。