VS中使用Gulp

關於gulp資料可以訪問:http://www.gulpjs.com.cn/，本篇主要講解在VS中使用gulp對js和css進行壓縮合並

1、下載node.js，gulp依賴於node.js，可以訪問http://nodejs.cn/下載，本人下載的4.4.4版本，下載完后進行傻瓜式安裝，注意安裝路徑最好不要含有空格或中文

2、安裝gulp以及需要的插件

    1、輸入命令進行安裝gulp

        npm install --global gulp

    2、安裝需要用到的插件，可以選擇安裝

        npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-notify

    3、輸入gulp -v，如果能出現版本號說明安裝成功

3、新建Web項目，並在項目根目錄下新建gulpfile.js，內容為：

var gulp = require('gulp');

// 引入組件
var //htmlmin = require('gulp-htmlmin'), //html壓縮
    minifycss = require('gulp-minify-css'),//css壓縮
    uglify = require('gulp-uglify'),//js壓縮
    concat = require('gulp-concat'),//文件合並
    rename = require('gulp-rename'),//文件更名
    notify = require('gulp-notify');//提示信息

/*
*：匹配任意數量的字符，不包括/
?：匹配單個字符，不包括/
**：匹配任意數量的字符，包括/
{}：允許使用逗號分隔的列表，表示“or”（或）關系
!：用於模式的開頭，表示只返回不匹配的情況
*/
//比如，Scripts/*.js匹配Scripts目錄下面的文件名以.js結尾的文件，
//CSS/**/*.css匹配CSS目錄和它的所有子目錄下面的文件名以.css結尾的文件，
//!*.css表示匹配所有后綴名不為“.css”的文件。
var cssPath = ['CSS/**/*.css'];
var jsPath = ['Scripts/*.js'];

// 合並、壓縮、重命名css
gulp.task('css', function () {
    return gulp.src(cssPath)
    .pipe(concat('main.css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dest/css'));
    //.pipe(notify({ message: 'css task ok' }));
});

// 合並、壓縮js文件
gulp.task('js', function () {
    return gulp.src(jsPath)
    .pipe(concat('main.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dest/js'));
    //.pipe(notify({ message: 'js task ok' }));
});

// 默認任務
gulp.task('default', function () {
    gulp.run('css', 'js');

    // 監聽 .css files 改變則會重新壓縮
    gulp.watch(cssPath, ['css']);

    // 監聽 .js files 改變則會重新壓縮
    gulp.watch(jsPath, ['js']);
});

4、如果安裝的是VS2015則不需要安裝插件，右鍵gulpfile.js會有task runner explorer，如果是VS2013或其他版本：

    在VS工具-擴展更新-聯機-輸入task runner explorer搜索安裝

     

5、如果出現此頁面則成功了，雙擊某個任務即可運行

6、我這里是雙擊default任務，運行結果：

 

結語：在默認的系統盤下安裝了gulp以及插件，但是換到其他盤符又不行了，需要重新在該盤安裝

Demo下載