為什么要使用Gulp？

看了兩天的Gulp，目前接觸到Gulp及其一些插件的功能有：

編譯LESS（或Sass）、合并與壓縮CSS和JS文件、在文件修改后自動(dòng)刷新頁(yè)面、給文件添加版本信息等。

這些功能可以讓我專注于前端開發(fā)，而不用再去管文件的編譯等瑣事，也不用再在修改代碼后手動(dòng)刷新瀏覽器查看效果。

這些功能幾乎都依賴于Gulp的插件，當(dāng)然還有更多提供其他功能的插件，大家可以去探索發(fā)現(xiàn)。

Gulp詳細(xì)入門教程

如果不知道Gulp的基礎(chǔ)使用方法的話，可以戳下面的鏈接：
Gulp詳細(xì)入門教程

一個(gè)使用Gulp的小demo

這個(gè)demo使用Gulp實(shí)現(xiàn)文件修改后的自動(dòng)刷新瀏覽器頁(yè)面、編譯LESS以及合并壓縮CSS文件。

//導(dǎo)入工具包 require('node_modules里對(duì)應(yīng)模塊')
var gulp = require('gulp'),
    less = require('gulp-less'),            
    browserSync = require('browser-sync'),  // 保存自動(dòng)刷新

    cssnano = require('gulp-cssnano'),      // CSS 壓縮
    rename = require('gulp-rename'),        // 重命名，其實(shí)在這個(gè)demo里沒(méi)有用到
    concat = require('gulp-concat'),        // 合并文件

    //當(dāng)發(fā)生異常時(shí)提示錯(cuò)誤 確保本地安裝gulp-notify和gulp-plumber
    notify = require('gulp-notify'),        // 相當(dāng)于 console.log()
    plumber = require('gulp-plumber');
 
//定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱）
gulp.task('testLess', function () {
    gulp.src('src/less/*.less')                                                         //該任務(wù)針對(duì)的文件
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))   //錯(cuò)誤處理
        .pipe(less())                                                                   //編譯less
        .pipe(gulp.dest('src/css'))                                                     //將會(huì)在src/css下生成CSS文件
        .pipe(concat('index.min.css'))                                                  //合并CSS文件為index.min.css
        .pipe(cssnano())                                                                //壓縮
        .pipe(gulp.dest('dist'));                                                       //輸出壓縮后的文件
});

gulp.task('testWatch', function () {
    browserSync.init({
        server: {
            baseDir: 'dist'                 // 在 dist 目錄下啟動(dòng)本地服務(wù)器環(huán)境，自動(dòng)啟動(dòng)默認(rèn)瀏覽器
        }
    });

    gulp.watch('src/less/*.less', ['testLess']);
    gulp.watch(['dist/*']).on('change', browserSync.reload);
});

//gulp.task(name[, deps], fn) 定義任務(wù)  name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑

解釋一下代碼

首先需要在命令行中執(zhí)行Gulp任務(wù)：

gulp testWatch

在名為testWatch的task中，browserSync.init()啟動(dòng)了服務(wù)器并打開瀏覽器、打開了dist文件夾下的index.html頁(yè)面。

其下的兩個(gè)gulp.watch()方法分別監(jiān)視了less文件的修改與dist文件夾下文件的修改，當(dāng)less文件修改時(shí)，調(diào)用名為testLess的task，完成less文件的編譯并合并壓縮CSS文件；此時(shí)dist下的CSS文件被修改了，會(huì)調(diào)用browserSync.reload方法刷新頁(yè)面。

下附項(xiàng)目目錄結(jié)構(gòu)：

項(xiàng)目目錄結(jié)構(gòu)

最后

這個(gè)demo中用到的插件有：

• browser-sync
• gulp-concat
• gulp-cssnano
• gulp-less
• gulp-notify
• gulp-plumber
• gulp-rename

在代碼的注釋里面說(shuō)明了它們的用途，在使用之前我們需要使用以下指令安裝插件并添加到package.json文件的開發(fā)依賴中。

npm install <插件名> --save-dev

也許你不需要編譯LESS的功能，也許你還需要更多其他Gulp的功能，這些通過(guò)靈活使用Gulp的插件都能夠?qū)崿F(xiàn)。

最后推薦兩個(gè)我認(rèn)為對(duì)學(xué)習(xí)Gulp入門有用的鏈接：

想了解更多關(guān)于Gulp基礎(chǔ)API的知識(shí)，可以看gulp API 文檔

再推薦一位大佬的文章，可以學(xué)到更多關(guān)于Gulp的用法：
Gulp 自動(dòng)化你的前端