自动化构建工具gulp

gulp是一个自动化构建工具，它可以帮助你缩短开发时间，处理重复的任务，简化你的开发工作流，在web开发中它可以帮助你进行css的预处理，js的切割和最小化，即时重载等，它可以很多IDE工具进行集成，比如webstrom，你也可以把它用在PHP, .NET, Node.js, Java 开发工作中，有 1700 个插件供你使用，强大gulp让你开发更加自动化，接下来让我们体验一下gulp，并且实现在修改node express框架中的js文件时，自动重启node进程，让gulp更好的为你工作

安装gulp

$ npm install --global gulp

在项目文件中创建gulpfile.js文件 ，并且添加以下内容到gulpfile.js文件中

var gulp = require('gulp');
gulp.task('default', function() {
  // place code for your default task here
  console.info('start gulp..........');
});

运行gulp

$ gulp

你将会在控制台中看到

start gulp..........

在运行不带任何参数运行gulp时，它将会执行默认任务

gulp文件处理

gulp.src(globs[, options])

gulp.dest(path[, options])

在开发的过程中你可能每次修改sass文件时都要将它编译为css文件，每次都敲一个长长的命令，gulp的gulp.src,gulp.dest Api简化执行工作流程

在的项目目录中新建一个app.js文件，并写入以下内容

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('start gulp .....!');
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

并且在gulpfile.js文件中添加

gulp.src('*.js')
  .pipe(minify())
  .pipe(gulp.dest('build'));

执行gulp，你将会看你项目当前目录下的js文件都被压缩后并输出build目录中

pipe管道方法，它会让文件流通过管道并且调用相关插件对文件进行各种处理，比如切割，压缩，sass文件编译

gulp任务

gulp.task(name[, deps], fn)

定义简单任务

gulp.task('somename', function() {
  // Do stuff 执行某些操作
});

执行多个多任务

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

执行完mytask任务后，自动执行array，of，task，names任务

gulp监听文件变化

gulp.watch(glob[, opts], tasks)

下面将会监听项目的当前目录下所有js文件的变化，并且执行reload任务

var watcher = gulp.watch('*.js', ['reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

Node Express 框架node进程自动重启

安装重启node进程插件

npm install --save-dev gulp-nodemon

在express项目的根目录gulpfile.js填写以下内容

// Gulpfile.js
var gulp = require('gulp')
var nodemon = require('gulp-nodemon');
gulp.task('develop', function () {
    nodemon({ script: 'app.js'
        , ext: 'html js'
        , ignore: ['ignored.js']
    }
    ).on('restart', function () {
            console.log('restarted!')
        })
})
gulp.task('serve',['develop'], function () {
    gulp.watch(['route/*.js','*.js']);
})

gulp会监听route文件夹和项目根目录所有js文件的变化，并且重启node进程