node入門（三）——gulp運用實例

時間 2019-12-04

原文原文鏈接

　　在上一篇《node入門（二）——gulpfile.js初探》中，咱們知道了（看懂入門二及其參考資料）怎麼運用gulp來更高效的開發，如今來示範一下。css

　　在package.json裏面配置好devDependencies：html

"devDependencies": {
    "browser-sync": "^2.10.1",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-eslint": "^1.1.1",
    "gulp-if": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-load-plugins": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-size": "^2.0.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.1",
    "run-sequence": "^1.1.5",
    "gulp-minify-css": "^1.2.4",
    "gulp-htmlmin": "^1.3.0",
    "gulp-jshint": "^1.5.0",
    "jshint-stylish": "^2.1.0"
  }

　　如今開始寫咱們的task。node

　　首先創建以下目錄結構：git

　　在study目錄下，app是咱們寫代碼的目錄，dist是生產目錄，app裏寫的代碼在通過gulp處理以後，輸出到dist下面，發版就用dist目錄。github

　　目錄結構建好以後，在相應的目錄下面繼續創建項目目錄，爲了接下來的方便，在gulpfile裏將目錄結構寫成json格式：json

var paths = {
    dist: {
        all: 'dist/**/*',
        js: 'dist/js',
        css: 'dist/css',
        img: 'dist/img',
        html: 'dist/html',
        lib: 'dist/lib'
    },
    app: {
        all: 'app/**/*',
        less: 'app/style/**/*.less',
        js: 'app/js/**/*.js',
        img: 'app/img/**/*',
        html: 'app/views/**/*.html'
    }
};

　　如今開始寫task。gulp

　　首先咱們想到要編譯並壓縮less文件，因而寫下這個task：瀏覽器

//compress less & minify css
gulp.task('less', function () {
    return gulp.src(paths.app.less)
        .pipe(g.less())
        .pipe(g.minifyCss())
        .pipe(gulp.dest(paths.dist.css));
});

　　找到全部的less文件，編譯成css以後壓縮，再輸出到dist/css目錄下。服務器

　　而後咱們想到能夠再壓縮一下html：app

//minify HTML
gulp.task('minifyHTML', function () {
    return gulp.src(paths.app.html)
        .pipe(g.htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(paths.dist.html));
});

　　還有關於js方面，除了壓縮，咱們能夠檢查一下js的語法錯誤,因而分別寫下兩個task：

//minifies js
gulp.task('minifyJS', function () {
    return gulp.src(paths.app.js)
    .pipe(g.uglify())
    .pipe(gulp.dest(paths.dist.js));
});

// Inspect js
gulp.task('jshint', function() {
    gulp.src(paths.app.js)
    .pipe(g.jshint(packageJSON.jshintConfig))
    .pipe(g.jshint.reporter(stylish))
});

　　這裏壓縮js很好理解，關於檢查js語法錯誤我補充幾點：

一、pipe(g.jshint(packageJSON.jshintConfig))這裏我是用了自定義語法規則，若是不自定義的話，能夠直接這樣使用：pipe(g.jshint())

二、自定義語法規則有四種方法，我採用的是在package.json裏增長配置項jshintConfig，相似這樣：

"jshintConfig": {
    "asi": false,
    "unused": true
  }

　　具體配置參數去官網查詢。

三、pipe(g.jshint.reporter(stylish))是把錯誤提示輸出美化了一下，可是要多加一個叫作jshint-stylish的插件，要求不高的話默認輸出就行：pipe(g.jshint.reporter("default"))

　　這些任務均可以獨立執行，好比檢查一下js有沒有語法錯誤：

gulp jshint

　　但這樣還不夠高效，咱們想在編輯器裏面保存後瀏覽器就能馬上自動刷新，所見即所得。因此咱們能夠監控文件是否有改動，有就刷新瀏覽器。

　　首先寫監控任務，指明要監控哪些文件，監控到改動又要作什麼：

// Watching static resources
gulp.task('watch', function () {
    gulp.watch(paths.app.html, ['minifyHTML']);
    gulp.watch(paths.app.less, ['less']);
    gulp.watch(paths.app.js, ['jshint','minifyJS']);
});

　　這裏監控了全部的html，有改動就執行minifyHTML任務；監控全部的less，有改動就執行less任務；監控全部的js，有改動就異步執行jshint和minifyJS任務，注意這裏的2個任務是異步執行的，在任務執行順序沒有特別要求的時候咱們能夠這麼作。

　　如今咱們監控了改動並作了相應的處理，可是瀏覽器還不知道這些事情已經發生了，因此咱們開個服務器，當這些事情發生時好讓服務器通知瀏覽器一聲，好自動刷新，我們就解脫了是吧。

// Synchronously update browser
gulp.task('browser', function () {
    browserSync({
        server: './',
        startPath: 'dist/html/index.html'
    });
    gulp.watch([paths.app.all], browserSync.reload);
});

　　這裏用到的是browser-sync插件，更多參數配置自行查詢官網。

　　最後不要漏了一個重要任務——及時清理：

// Clean dist
gulp.task('clean', function () {
    return del('dist/*');
});

　　當更新數據到dist時，先將以前的數據清理掉。

　　如今貌似全部的需求都達到了（實際需求固然更多，好比圖片處理、打標籤、打包等等），那麼咱們能夠對任務進行組合，來提供更如任務入口。

好比，咱們能夠組合一個任務，一次性幫咱們把js語法檢查壓縮（通常運行時不檢測，檢測做爲單獨的任務），less編譯壓縮，html壓縮都給作了：

// Only build
gulp.task('build', function () {
    runSequence('clean', ['jshint','minifyJS', 'less', 'minifyHTML']);
});

　　這裏咱們用到run-sequence插件，讓任務按順序執行。

　　咱們還能夠把build任務和監控任務組合起來，也就是監控到變化就build：

// Build & Watch
gulp.task('build-watch', ['build', 'watch'], function () {
    console.log('App frontend is built and watching on static resources...');
});

　　這裏咱們發現task裏多了個參數['build', 'watch']，意思是在執行build-watch任務以前，要先執行build和watch任務，build-watch任務對build和watch有依賴關係。

　　那麼咱們的的默認任務（運行命令gulp時執行的任務）就能夠簡單的這樣寫：

gulp.task('default', function () {
    //Run a series of dependent gulp tasks in order
    runSequence('build-watch','browser');
});

　　補充一點，gulp-load-plugins 是用來自動require gulp模塊的，全部模塊都要用require引入，這是commonJS規範。

附錄：

　　1、完整的gulpfile.js:

  1 var gulp = require('gulp'); //requires the core Gulp library
  2 var g = require('gulp-load-plugins')(); //read the dependencies in the package.json file and inject each of them for us.
  3 var browserSync = require('browser-sync');
  4 var del = require('del');
  5 var runSequence = require('run-sequence');
  6 
  7 //jshint block
  8 //Stylish reporter for JSHint(reporter looked more beauty)
  9 //use jshintConfig in package.json to specifying Linting Options
 10 var stylish = require('jshint-stylish');
 11 var packageJSON  = require('./package');
 12 //var jshintConfig = packageJSON.jshintConfig;
 13 
 14 var paths = {
 15     dist: {
 16         all: 'dist/**/*',
 17         js: 'dist/js',
 18         css: 'dist/css',
 19         img: 'dist/img',
 20         html: 'dist/html',
 21         lib: 'dist/lib'
 22     },
 23     app: {
 24         all: 'app/**/*',
 25         less: 'app/style/**/*.less',
 26         js: 'app/js/**/*.js',
 27         img: 'app/img/**/*',
 28         html: 'app/views/**/*.html'
 29     }
 30 };
 31 
 32 // Clean dist
 33 gulp.task('clean', function () {
 34     return del('dist/*');
 35 });
 36 
 37 //minifies js
 38 gulp.task('minifyJS', function () {
 39     return gulp.src(paths.app.js)
 40     .pipe(g.uglify())
 41     .pipe(gulp.dest(paths.dist.js));
 42 });
 43 
 44 // Inspect js
 45 gulp.task('jshint', function() {
 46     gulp.src(paths.app.js)
 47     .pipe(g.jshint(packageJSON.jshintConfig))
 48     .pipe(g.jshint.reporter(stylish))
 49 });
 50 
 51 //compress less & minify css
 52 gulp.task('less', function () {
 53     return gulp.src(paths.app.less)
 54         .pipe(g.less())
 55         .pipe(g.minifyCss())
 56         .pipe(gulp.dest(paths.dist.css));
 57 });
 58 
 59 //minify HTML
 60 gulp.task('minifyHTML', function () {
 61     return gulp.src(paths.app.html)
 62         .pipe(g.htmlmin({
 63             collapseWhitespace: true
 64         }))
 65         .pipe(gulp.dest(paths.dist.html));
 66 });
 67 
 68 // Watching static resources
 69 gulp.task('watch', function () {
 70     gulp.watch(paths.app.html, ['minifyHTML']);
 71     gulp.watch(paths.app.less, ['less']);
 72     gulp.watch(paths.app.js, ['jshint','minifyJS']);
 73 });
 74 
 75 // Synchronously update browser
 76 gulp.task('browser', function () {
 77     browserSync({
 78         //proxy: 'localhost:3000',
 79         //port: 3001,
 80         server: './',
 81         startPath: 'dist/html/index.html'
 82     });
 83 
 84     gulp.watch([paths.app.all], browserSync.reload);
 85 });
 86 
 87 // Only build
 88 gulp.task('build', function () {
 89     runSequence('clean', ['jshint','minifyJS', 'less', 'minifyHTML']);
 90 });
 91 
 92 // Build & Watch
 93 gulp.task('build-watch', ['build', 'watch'], function () {
 94     console.log('App frontend is built and watching on static resources...');
 95 });
 96 
 97 gulp.task('default', function () {
 98     //Run a series of dependent gulp tasks in order
 99     runSequence('build-watch','browser');
100 });