编写gulpfile.js文件：压缩合并css、js

使用gulp一共有四个步骤：

$ npm install --global gulp

$ npm install gulp --save -d

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

$ gulp

下面用实例讲解一下如何编写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');
});

$ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install gulp --save -d

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。