編寫gulpfile.js文件：壓縮合並css、js

使用gulp一共有四個步驟：

1. 全局安裝 gulp： $ npm install --global gulp 2. 做爲項目的開發依賴（devDependencies）安裝： $ npm install gulp --save -dgulp 3. 在項目根目錄下建立一個名爲 gulpfile.js 的文件： var gulp = require('gulp'); gulp.task('default', function() { // 將你的默認的任務代碼放在這 }); 4. 運行 gulp： $ gulp 默認的名爲 default 的任務（task）將會被運行，在這裏，這個任務並未作任何事情。 想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>。

 

下面用實例講解一下如何編寫gulpfile.js文件。

 

實例1.編寫一個簡單的實例：壓縮css,js文件

/*gulpfile.js*/
var gulp = require('gulp'),  //必須的
    mincss = require('gulp-mini-css'),  //壓縮css
    uglify = require('gulp-uglify');  //壓縮js

var raw_css = './raw/css',
    com_css = './compress/css',
    raw_js = './raw/js',
    com_js = './compress/js';

gulp.task('mincss', function () {  //mincss任務
    gulp.src(raw_css+'/**/*.scss')
        .pipe(mincss())
        .pipe(gulp.dest(com_css));
});

gulp.task('minjs', function () {   //minjs任務
    gulp.src(raw_js+'/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest(com_js));
});

gulp.task('watch', function () {   //監放任務
    gulp.watch(raw_css+'/**/*.css',['mincss']);
    gulp.watch(raw_js+'/**/*.js',['minjs']);
});

gulp.task('default',function(){  //默認執行
    gulp.run('sass','minjs','mincss');
    gulp.run('watch');
});

 

實例2.壓縮合並一個文件夾的全部文件爲一個min文件

/*gulpfile.js*/
var gulp = require('gulp'),
    mincss = require('gulp-mini-css'),  //壓縮css
    minjs = require('gulp-uglify'),  //壓縮js
    concat = require('gulp-concat'),  //合併
    rename = require('gulp-rename'), //重命名
    del = require('del'); //刪除


var raw_css = './raw/css',
    com_css = './compress/css',
    raw_js = './raw/js',
    com_js = './compress/js';


/*
方法名：壓縮合並css
功能：將raw_css文件夾下全部.css文件 -> main.min.css
*/
gulp.task('minCss', function () {
    gulp.src(raw_css+'/*.css')  //輸入
        .pipe(concat("main.css"))  //合併
        .pipe(mincss()) //壓縮css
        .pipe(rename({suffix: '.min'}))  //重命名
        .pipe(gulp.dest(com_css));  //輸出
});

/*
方法名：合併css
功能：將raw_css文件夾下全部.css文件 -> main.js
*/
gulp.task('concatCss', function () {
    gulp.src(raw_css+'/*.css')  //輸入
        .pipe(concat("main.css"))  //合併
        .pipe(gulp.dest(com_css));  //輸出
});



/*
方法名：壓縮合並js
功能：將raw_js文件夾下全部.js文件 -> main.min.js
*/
gulp.task('minJS', function () {
    gulp.src(raw_js+'/*.js')  //輸入
        .pipe(concat("main.js"))  //合併
        .pipe(minjs()) //壓縮css
        .pipe(rename({suffix: '.min'}))  //重命名
        .pipe(gulp.dest(com_js));  //輸出
});

/*
方法名：合併js
功能：將raw_js文件夾下全部.js文件 -> main.js
*/
gulp.task('concatJS', function () {
    gulp.src(raw_js+'/*.js')  //輸入
        .pipe(concat("main.js"))  //合併
        .pipe(gulp.dest(com_js));  //輸出
});

//默認執行
gulp.task('default',function(){
    gulp.run('minCss','concatCss','minJS','concatJS');
});

 

實例3.壓縮合並多個文件夾的文件爲一個min文件

/*gulpfile.js*/
var gulp = require('gulp'),
    mincss = require('gulp-mini-css'),  //壓縮css
    minjs = require('gulp-uglify'),  //壓縮js
    concat = require('gulp-concat'),  //合併
    rename = require('gulp-rename'), //重命名
    del = require('del'); //刪除


var source_css = './public/styles', //css
    des_css = './public/plugins/huidao/css',
    source_js = './public/scripts',  //js
    des_js = './public/plugins/huidao/js';


//壓縮合並css
gulp.task('minCss', function () {
    gulp.src(source_css+'/*.css')  //輸入
        .pipe(concat("huidao.css"))  //合併
        .pipe(mincss()) //壓縮css
        .pipe(rename({suffix: '.min'}))  //重命名
        .pipe(gulp.dest(des_css));  //輸出
});

//合併css
gulp.task('concatCss', function () {
    gulp.src(source_css+'/*.css')  //輸入
        .pipe(concat("huidao.css"))  //合併
        .pipe(gulp.dest(des_css));  //輸出
});

/*
*任務：壓縮合並open的js
*  huidao.open.min.js = /controller/open.controller.js + /controller/open/*.js +  /factory/open/*.js
* */
gulp.task('minOpenJs', function () {
    gulp
        .src([source_js+"/controller/open.controller.js",source_js+"/controller/open/*.js",source_js+"/factory/open/*.js"])
        .pipe(concat("huidao.open.js"))
        .pipe(minjs())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest(des_js));
});

/*
 *任務：合併open的js
 *  huidao.open.js = /controller/open.controller.js + /controller/open/*.js +  /factory/open/*.js
 * */
gulp.task('concatOpenJs', function () {
    gulp
        .src([source_js+"/controller/open.controller.js",source_js+"/controller/open/*.js",source_js+"/factory/open/*.js"])
        .pipe(concat("huidao.open.js"))
        .pipe(gulp.dest(des_js));
});

/*
 *任務：壓縮合並developer的js
 *  huidao.developer.min.js = /controller/developer.controller.js + /controller/developer/*.js +  /factory/developer/*.js
 * */
gulp.task('minDeveloperJs', function () {
    gulp
        .src([source_js+"/controller/developer.controller.js",source_js+"/controller/developer/*.js",source_js+"/factory/developer/*.js"])
        .pipe(concat("huidao.developer.js"))
        .pipe(minjs())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest(des_js));
});

/*
 *任務：合併developer的js
 *  huidao.developer.js = /controller/developer.controller.js + /controller/developer/*.js +  /factory/developer/*.js
 * */
gulp.task('concatDeveloperJs', function () {
    gulp
        .src([source_js+"/controller/developer.controller.js",source_js+"/controller/developer/*.js",source_js+"/factory/developer/*.js"])
        .pipe(concat("huidao.developer.js"))
        .pipe(gulp.dest(des_js));
});

/*
 *任務：壓縮合並admin的js
 *  huidao.admin.min.js = /controller/admin.controller.js + /controller/admin/*.js +  /factory/admin/*.js
 * */
gulp.task('minAdminJs', function () {
    gulp
        .src([source_js+"/controller/admin.controller.js",source_js+"/factory/admin/*.js",source_js+"/controller/admin/*.js"])
        .pipe(concat("huidao.admin.js"))
        .pipe(minjs())
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest(des_js));
});

/*
 *任務：合併admin的js
 *  huidao.admin.js = /controller/admin.controller.js + /controller/admin/*.js +  /factory/admin/*.js
 * */
gulp.task('concatAdminJs', function () {
    gulp
        .src([source_js+"/controller/admin.controller.js",source_js+"/factory/admin/*.js",source_js+"/controller/admin/*.js"])
        .pipe(concat("huidao.admin.js"))
        .pipe(gulp.dest(des_js));
});

//默認執行
gulp.task('default',function(){
    gulp.run('minCss','concatCss','minOpenJs','concatOpenJs','minDeveloperJs','concatDeveloperJs','minAdminJs','concatAdminJs');
});