gulp學習(三)-實戰

參考

• i5tingbook

• gulp-book

前面兩節學習到gulp的基本知識，也知道gulp能夠進行壓縮,監控，combo等等，這節進行實戰。因爲gulp有不少插件,因此咱們沒必要重複造輪子,只用用好相關插件就能夠

gulp當作web服務器

某些時候咱們會在本地安裝Apache或者Nginx當作靜態服務器,有了gulp以後就不用了。gulp-connect插件能夠實現web服務器功能

安裝gulp-connect：

npm install --save-dev gulp-connect

示例：

'use strict';
    const gulp = require('gulp');
    const connect  = require('gulp-connect');
    gulp.task('server',function(){
        connect.server();
    });
    gulp.task('default',['server']);

執行命令gulp,而後終端會打印日誌以下:

[22:07:20] Using gulpfile ~/WebstormProjects/es6-doc/gulpfile.js
    [22:07:20] Starting 'server'...
    [22:07:20] Finished 'server' after 34 ms
    [22:07:20] Starting 'default'...
    [22:07:20] Finished 'default' after 7.53 μs
    [22:07:20] Server started http://localhost:8080

能夠看出已經啓動了web服務器。能夠經過http://localhost:8080訪問。默認是訪問gulpfile.js所在目錄的index.html

省時的瀏覽器同步測試工具browsersync

摘自官網

rowsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。您能夠想象一下：「假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您須要調試的頁面，當您使用browsersync後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動」。不管您是前端仍是後端工程師，使用它將提升您30%的工做效率。

gulp 壓縮js css

安裝 gulp-uglify：

npm install --save-dev gulp-uglify

示例：

gulp.watch('js/*.js',['uglify_js']);
    gulp.task('uglify_js',function(){
        gulp.src('js/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('build/js'));
    });
    gulp.task('default',['uglify_js']);

上面這段代碼能夠實現,當js文檔下面的js文件內容變化時，會被從新壓縮並輸出到目的目錄

gulp 編譯less

安裝：

npm install --save-dev gulp-less

示例：

const gulp = require('gulp');
    const less = require('gulp-less');
    // 編譯less
    // 在命令行輸入 gulp less 啓動此任務
    gulp.task('less', function () {
        // 1. 找到 less 文件
        gulp.src('less/**.less')
            // 2. 編譯爲css
            .pipe(less())
            // 3. 另存文件
            .pipe(gulp.dest('dist/css'))
    });

    // 在命令行使用 gulp auto 啓動此任務
    gulp.task('auto', function () {
        // 監聽文件修改，當文件被修改則執行 less 任務
        gulp.watch('less/**.less', ['less'])
    })

    // 使用 gulp.task('default') 定義默認任務
    // 在命令行使用 gulp 啓動 less 任務和 auto 任務
    gulp.task('default', ['less', 'auto'])

上面代碼能夠實現less文件變化,編譯輸出到css文件夾下

另外還能夠用gulp來編譯sass和壓縮圖片以及combo文件等等。能夠本身去查看

利用gulp構建項目