使用gulp构建ES6项目

项目结构

• 项目主目录
  • app：前端工程目录
    • css：css目录
    • js：js目录
      • class：class目录，用于放置类
      • index.js：js目录的入口文件
    • views：视图目录
  • server：后端工程目录
  • tasks：gulp任务目录
    • util：放置常见的工具脚本
  • .babelrc：babelrc配置文件
  • gulpfile.babel.js
  • package.json：项目依赖文件

npm init：初始化项目，生成package.json

后端环境搭建

1. 安装node.js
2. 全局安装express和express-generator脚手架工具
   npm install -g express
npm install -g express-generator
3. 切换到server目录
4. 在当前目录用express以ejs为模板创建项目：express -e .
5. 安装依赖：npm install

构建目录搭建

1. 进入构建目录tasks/util目录，创建args.js用来识别命令行脚本参数

// 引入命令行参数解析模块yargs
import yargs from 'yargs'

const args = yargs
    // 根据命令行参数`-production`，判断当前应用的运行环境
    .option('production', {
      boolean: true,
      default: false,
      describe: ''
    })
    // 根据命令行参数`-watch`，判断当前是否监控文件的变化
    .option('watch', {
      boolean: true,
      default: false,
      describe: ''
    })
    // 根据命令行参数`-verbose`，判断是否输出命令行执行日志
    .option('verbose', {
      boolean: true,
      default: false,
      describe: ''
    })
    // 根据命令行参数`-sourcemaps`，判断是否启用文件映射
    .option('sourcemaps', {
      describe: 'force the creation of sourcemaps'
    })
    // 根据命令行参数`-port`，设置服务器端口
    .option('port', {
      string: true,
      default: 8080,
      describe: 'server port'
    })
    // 对输入的命令行内容，以字符串形式进行解析
    .argv

2. 返回tasks目录，创建JS编译任务脚本scripts.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import concat from 'gulp-concat';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import named from 'vinyl-named';
import livereload from 'gulp-livereload';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import {log, colors} from 'gulp-util';
import args from './util/args';

gulp.task('scripts', () => {
  return gulp.src(['app/js/index.js']).pipe(plumber({errorHandle: function() {}})).pipe(named()).pipe(gulpWebpack({
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader'
        }
      ]
    }
  }), null, (err, stats) => {
    log(`Finished '${colors.cyan('scripts')}'`, stats.toString({chunks: false}))
  }).pipe(gulp.dest('server/public/js')).pipe(rename({basename: 'cp', extname: '.min.js'})).pipe(uglify({
    compress: {
      properties: false
    },
    output: {
      'quote_keys': true
    }
  })).pipe(gulp.dest('server/public/js')).pipe(gulpif(args.watch, livereload()))
})

3. 创建模板编译脚本pages.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';

gulp.task('pages',()=>{
  return gulp.src('app/**/*.ejs')
    .pipe(gulp.dest('server'))
    .pipe(gulpif(args.watch,livereload()))
})

4. 创建css编译脚本css.js

import gulp from 'gulp'
import gulpif from 'gulp-if'
import livereload from 'gulp-livereload'
import args from './util/args'

gulp.task('css', () => {
  return gulp.src('app/**/*.css')
    .pipe(gulp.dest('server/public/css'))
})

5. 创建服务器端配置脚本

import gulp from 'gulp';
import gulpif from 'gulp-if';
import liveserver from 'gulp-live-server';
import args from './util/args';

gulp.task('serve',(cb)=>{
  if(!args.watch) return cb();

  var server = liveserver.new(['--harmony','server/bin/www']);
  server.start();

  gulp.watch(['server/public/**/*.js','server/views/*.ejs'], function(file){
    server.notify.apply(server, [file]);
  })

  gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
    server.start.bind(server)()
  });
})

6. 在后端环境安装connect-livereload
npm install --save-dev connect-livereload
7. 修改后端代码app.js以便能够进行热更新

...
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
/* 关键代码 start */
app.use(require('connect-livereload')());
/* 关键代码 end */
app.use('/', index);
app.use('/users', users);
...

8. 创建文件自动监听文件brower.js

import gulp from 'gulp'
import gulpif from 'gulp-if'
import gutil from 'gulp-util'
import args from './util/args'

gulp.task('brower', (cb) => {
  if(!args.watch) {
    return cb()
  }
  gulp.watch('app/**/*.js', ['scripts']);
  gulp.watch('app/**/*.ejs', ['pages']);
  gulp.watch('app/**/*.css', ['css']);
})

9. 创建清空编译目录的任务clean.js

import gulp from 'gulp'
import del from 'del'
import args from './util/args'

// 重新编译前，清空当前输出目录
gulp.task('clean', () => {
  return del(['server/public', 'server/views'])
});

10. 创建build.js，组织任务之间的关联关系和先后顺序

import gulp from 'gulp'
import gulpSequence from 'gulp-sequence'

gulp.task('build', gulpSequence('clean', 'css', 'pages', 'scripts', ['brower', 'server']));

11. 创建默认任务default.js

import gulp from 'gulp'

gulp.task('default', ['build']);

12. 编辑gulpfile.babel.js文件

// 使用requireDirmo模块引入并运行构建目录中的脚本
let requireDir = require("require-dir");


requireDir('./tasks');

13. 编辑.babelrc文件

{
  "presets": ["es2015"]
}

14. 在命令行中通过gulp --watch进行编译