Expresss+gulp+MongoDB搭建网站(四)--gulp详解

 上一节中，我们创建了一个任务，但这个任务啥也没干，这一节，我们来学习如何通过配置gulpfile.js文件来实现我们想要的各种功能。

一、常用API

1、task

 gulp.task(name [, deps, fn]) 用于创建任务

 其中，name 是task的名字，deps是可选项，就是这个task依赖的tasks（可以是个list），fn是task要执行的函数。

 现在，我们将gulp.task文件修改为：

var gulp = require("gulp");

gulp.task("pre_task1", function() {
	console.log("enter task1 !");
})

gulp.task("pre_task2", function() {
	console.log("enter task2 !");
})

gulp.task("cur_task", ["pre_task1", "pre_task2"], function(){
    console.log("enter current task!");
});

 在命令行执行gulp cur_task：

 （给terminal换了个颜色，看着顺眼多了）

 可以看到，cur_task依赖的pre_task1和pre_task2先运行，然后再运行cur_task。

2、src和dest

 gulp.src(globs[, options])用于获取一个虚拟文件对象流，它存储着原始文件的文件名、路径、内容等信息，我们就简单理解为通过这个方法获取我们所需要操作的文件。

 其中，globs参数用来匹配文件路径（包括文件名），可以是string，也可以是一个list，options.base 是指多少路径被保留。

 gulp.dest(path[, options]) 用于输出文件。

 其中，path参数是最终文件要输出的路径，options一般不用。

 一般来说，我们先通过gulp.src()方法获取到需要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的文件流再通过pipe方法导入到gulp.dest()中。

 现在，我们将gulp.task文件修改为：

var gulp = require("gulp");

gulp.task("server", function(){
    gulp.src(['./public/javascripts/*.js']).pipe(gulp.dest('./build/js'));
    gulp.src(['./public/stylesheets/*.css']).pipe(gulp.dest('./build/css'));
});

 在project路径下新建一个build目录，并在命令行执行gulp server，可以看到：

      可以看到，将public路径下的js/css文件存放到了build路径下，当然我们仅仅是将这些文件整理到了build路径下，并没有对它们做任何处理。

如果想要想要对这些文件进行编译压缩等处理，还需要其他插件的帮助。

3、watch

 gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 用于监听文件的变化，然后运行指定的Tasks或者函数。

 现在，我们将gulp.task文件修改为：

var gulp = require("gulp");

gulp.task("server", function(){
    gulp.watch("./public/javascripts/*.js", ["js"]);
    gulp.watch("./public/stylesheets/*.css", ["css"]);
});

gulp.task("js", function () {
    return gulp.src(['./public/javascripts/*.js']).pipe(gulp.dest('./build/js'));
})

gulp.task("css", function () {
    return gulp.src(['./public/stylesheets/*.css']).pipe(gulp.dest('./build/css'));
})

 在命令行执行gulp server，然后修改 project／stylesheets／style.css文件，可以看到命令行有如下信息：

然后查看build／css路径下的style.css文件，发现也同步进行了更新。

二、启动项目

之前第二节中介绍过，在命令行中执行npm start，可以启动我们的exress项目（express迁到4.x版本后，改变了启动方式，不再是执行node app.js了，而是执行npm start， 调用的入口在 ./bin/www, 然后在其中调用到app.js，这样就把与启动服务的代码和主文件分离了）。

现在，我们通过配置gulpfile.js文件启动express项目，将js/css文件压缩打包，并实时监听js/css文件，如果在调试修改了js/css文件，也会更新到打包文件当中。

现在，我们将gulp.task文件修改为：

var gulp = require("gulp");

// var jshint = require('gulp-jshint');//js语法检查
var uglify = require("gulp-uglify");////js文件压缩
var minifyCss = require("gulp-minify-css");//css压缩

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');

var clean = require('gulp-clean');
var concat = require('gulp-concat');//合并文件
var rename = require('gulp-rename');   //文件重命名

gulp.task('clean',function(){
     gulp.src(['./build/js/*.js','./build/css/*.css'],{read:false})
         .pipe(clean());
 });    

gulp.task("node", ["clean"], function() {
    nodemon({
    script: './bin/www',
    ext: 'js html',
        env: {
            'NODE_ENV': 'development'
        }
    })
});

gulp.task('server', ["node", "js", "css"], function() {
    var files = [
        'views/**/*.html',
        'views/**/*.ejs',
        'views/**/*.jade',
        'public/**/*.*'
    ];

    //gulp.run(["node"]);
    browserSync.init(files, {
        proxy: 'http://localhost:4000',
        browser: 'chrome',
        notify: false,
        port: 4001
    });

    gulp.watch(files).on("change", reload); 

    gulp.watch('./public/stylesheets/*.css', ['css']);
    gulp.watch('./public/javascripts/*.js', ['js']); 

});

gulp.task("js", function () {
	return gulp.src(['./public/javascripts/*.js'])
		   .pipe(concat('project.js'))//合并后的文件名
	           .pipe(rename({ suffix: '.min' }))//重命名
                   .pipe(uglify())  //压缩js
                   .pipe(gulp.dest('./build/js'));
})

gulp.task("css", function () {
	return gulp.src(['./public/stylesheets/*.css'])
	           .pipe(concat('project.css'))//合并后的文件名
	           .pipe(rename({ suffix: '.min' }))//重命名
	           .pipe(minifyCss()) //压缩css
	           .pipe(gulp.dest('./build/css'));
})