基于gulp webpack ES6 node.js 构建项目

基于gulp webpack ES6 node.js

目录构建

• 前端文件 app目录
  • 内含 css目录
  • js目录
    • index.js 以及class类目录
  • views目录
    • index.html
    • error.html
• 服务端文件 server目录
  • 用express -e . 命令构建服务端脚手架
    注意：在使用express -e . 的命令时，cmd给我报了一段无法识别express command的错误，在网上查了一下，有人指出是express4的版本将命令工具分家了，所以需要我们安装以恶搞命令工具：
    命令如下：npm install -g express-generator
    之后再次安装：npm install -g express
    前提要全局安装node.js哦
  • npm install 加载项目依赖
• 任务文件 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-rename'
        import rename 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({
                errorHandler: 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()))
    })

• 内含util目录 用于放置功能类脚本

  • 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 scripts'
        })
        .option('verbose', {
            boolean: true,
            default: false,
            describe: 'log'
        })
        .option('sourcemaps', {
            describe: 'force the creation of sourcemaps'
        })
        .option('port', {
            string: true,
            default: 8080,
            describe: 'server port'
        })
        //表示命令行以字符串作为解析
        .argv
    

• 创建package.json文件
• 创建 .babelrc 配置文件