in gulp MEAN nodejs node.js ~ read.

MEAN使用技巧-2

接下来的几次更新会着重介绍gulp的使用因为本人也是学习不足之处请指出。

何为gulp

gulp.js - the streaming build system, 官方解释是流构建系统,其实就是node.js的构建工具,配置比grunt简洁,功能不输grunt。

怎么搞?

先安装

//linux -g为全局安装在这里只说此一次 以后文章里面不会说了
sudo npm i -g gulp  

如果只想用在一个项目里面使用

// -D开发者的依赖
npm i -D gulp  

创建gulpfile

var gulp = require('gulp');

gulp.task('default', function() {  
  // place code for your default task here
});

运行

在gulpfile 存在的目录下运行

gulp  

gulp 插件

先送上全体插件搜索传送门 推荐的插件:
1. gulp-csslint css代码审查

npm i -D gulp-csslint  

具体使用

var csslint = require('gulp-csslint');

gulp.task('css', function() {  
  gulp.src('client/css/*.css')//待审查css
    .pipe(csslint())
    .pipe(csslint.reporter());
});
  1. jslint js代码审查
npm i -D gulp-jslint  

使用实例:

/**
这个例子里使用了配置项path.js,
plugins 包管理插件 ,  
jshint-stylish包显示报告样式  
*/

var gulpLoadPlugins = require('gulp-load-plugins'),  
    plugins = gulpLoadPlugins(),
    paths = {
         js: ['./*.js', 'config/*.json', 'gulp/*.js', 'public/**/*.js'],
         css:[]//这里可以写css的路径 参考使用在gulp-csslint里面

    };

gulp.task('jshint', function () {  
  return gulp.src(paths.js)
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('jshint-stylish'))
      .pipe(count('jshint', 'files lint free'));
});

function count(taskName, message) {  
  var fileCount = 0;

  function countFiles(file) {
    fileCount++; // jshint ignore:line
  }

  function endStream() {
    gutil.log(gutil.colors.cyan(taskName + ': ') + fileCount + ' ' + message || 'files processed.');
    this.emit('end'); // jshint ignore:line
  }
  return through(countFiles, endStream);
}
  1. gulp-livereload 动态监控插件,监听事件并做相对处理,比如代码更新。
    安装方式还说么?再说一次吧
npm i -D gulp-livereload  

例子:

var gulp = require('gulp'),  
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {  
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {  
  livereload.listen();
  gulp.watch('less/*.less', ['less']);
});

升级到3.X之后要加start:true参数 livereload({ start: true }),才会启用监听。

  1. gulp-nodemon,gulp中的nodemon,模拟node启动和环境变量设置,配合liveload使用效果最佳。
    安装
npm i -D gulp-nodemon  

例子:这段会按守护进程方式运行,出现异常之后重启并执行jslint 任务

var gulp = require('gulp')  
  , nodemon = require('gulp-nodemon')
  , jshint = require('gulp-jshint')

gulp.task('lint', function () {  
  gulp.src('./**/*.js')
    .pipe(jshint())
})

gulp.task('develop', function () {  
  nodemon({ script: 'server.js'
          , ext: 'html js'
          , ignore: ['ignored.js']
          , tasks: ['lint'] })
    .on('restart', function () {
      console.log('restarted!')
    })
})

建议

建议将gulp gulpfile放在不同的文件里面,需要个require-dir 的包来required 多个gulp文件,根据不用环境运行不同的gulpfile,需要在此目录下建立gulp 文件,两个gulp 分别叫development.js 和production.js 代表开发和生产环境。
gulpfile处理如下:

'use strict';

var gulp = require('gulp');

var env = process.env.NODE_ENV || 'development';

// read gulp directory contents for the tasks...
require('require-dir')('./gulp');  
gulp.task('default', [], function (defaultTasks) {  
  // run with paramater
  gulp.start(env);
});