无标题文章

1.项目目录创建

image

2.使用express脚手架工具

cd server

express -e .

npm install

3.自动创建package.json文件

npm init

4.创建babel工具的配置文件

touch .babelrc

touch gulpfile.babel.js

5.编写任务脚本

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;

6.创建script脚本

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()))
});