express是node.js中的构建工具，如果需要使用express构建，首先需要安装express。
构建一个项目：
|-- app
| |-- css
| |-- js
| | `-- class
| | |-- index.js
| | `-- test.js
| `-- views
| |-- error.ejs
| `-- index.ejs
|-- server
|-- tasks
在构建完该目录后，在根目录上使用npm init -y，构建package.json文件，sudo cnpm install -g express-generator命令安装express（新版express存在在express-generator包中）然后进入server目录，通过express -e . 命令构建脚手架，其中 -e表示构建一级模板引擎
然后执行 cd . && npm install
回到构建目录：
cd ../tasks/
mkdir util
touch util/args.js
回到根目录
touch .babelrc(使用babel时使用)
touch gulpfile.babel.js (接下来使用ES6语法，所以需要创建gulpfile.babel.js文件)
进入args.js文件，引入一个包
import yargs from 'yargs'; const args =yargs .option('production',{ boolean:true, default:false, describe:'min all scripts' }) .option('watch',{ boolean:true, default:false, describe:'watch all files' }) .option('verbose',{ boolean:true, default:false, describe:'log' }) .option('sourcemaps',{ describe:'force the creation of sroucemaps' }) .option('port',{ string:true, default:8080, describe:'server port' }) .argv export default args;
touch tasks/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';
使用
cnpm install gulp gulp-if gulp-concat webpack webpack-stream gulp-plumber gulp-rename gulp-uglify gulp-util gulp-livereload vinyl-namedyargs --save-dev
等安装完毕后，重新进入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' }] } }),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())) })
touch tasks/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())) })
touch tasks/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')) })
touch tasks/server.js
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) returncb(); 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)() }); })
touch tasks/browser.js
import gulp from 'gulp'; import gulpif from 'gulp-if'; import gutil from 'gulp-util'; import args from './util/args' gulp.task('browser',(cb)=>{ if(!args.watch) returncb(); gulp.watch('app/**/*.js',['scripts']); gulp.watch('app/**/*.ejs',['pages']); gulp.watch('app/**/*.css',['css']); });
touch tasks/clean.js
import gulp from 'gulp'; import del from 'del'; import args from './util/args'; gulp.task('clean',()=>{ return del(['server/public','server/views']) })
touch tasks/build.js
import gulp from 'gulp'; import gulpSequence from 'gulp-sequence'; gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
touch tasks/default.js
import gulp from 'gulp';
gulp.task('default',['build']);npm i gulp-util gulp-live-server del --save-dev
cnpm i babel-loader babel-core babel-preset-env babel-preset-es2015 --save-dev
vimgulpfile.babel.js
import requireDir from 'require-dir';
requireDir('./tasks');cnpm i require-dir babel-register babel-preset-es2015 --save-dev
cnpm i gulp-sequence cookie-parser epxressmorgan serve-favicon --save-dev
修改server/app.js文件：
app.use(require('connect-livereload')())cnpm i connect-livereload babel-polyfill --save-dev
验证：
http://loalhost:3000