項目構建的目錄—創(chuàng)建文件夾
1.文件夾
app 前端代碼
? ? ????js
????????????class
????????????index.js 入口文件
????????css
? ? ????views 前端模板
????????????error.ejs 錯誤模板
????????????index.ejs 入口模板
2.server 服務器代碼
3.tasks 構建工具
????????util 放置常見腳本
????????????args.js
4.package.json npm依賴包的配置文件 (用命令創(chuàng)建：npm init)
5. .babelrc babel進行編譯時自動尋找的文件。名字不能更改，缺少則babel無法讀取配置文件 (用命令創(chuàng)建：touch .babelrc)
6. gulpfile.babel.js? gulp配置文件，此處不使用gulpfiles.js，因為我們使用的是ES6語法。(用命令創(chuàng)建：touch gulpfile.babel.js)
（1）對創(chuàng)建命令行參數(shù)做處理（args.js）
import yargs from 'yargs';//處理命令行參數(shù)
const args = yargs //區(qū)分開發(fā)環(huán)境和線上環(huán)境
.option('production',{
????boolean:true,
????default:false,//默認值 開發(fā)環(huán)境
????describe:'min all scripts'
})
//是否監(jiān)聽命開發(fā)環(huán)境修改的文件（是否自動編譯等） .option('watch',{? boolean:true,default:false, describe:'watch all files'})
//要不要詳細的輸出命令行執(zhí)行的日志
.option('verbose',{ boolean:true, default:false, describe:'log' })
//強制生成sourcemap .option('sourcemaps',{ describe:'force the creation of sourcemap' })
//設置服務器端口 .option('port',{ string:true, default:8080, describe:'server port' })
//表示對輸入的命令行內容以字符串進行解析
.argv
（2）創(chuàng)建構建腳本對js做處理（用命令行：touch tasks/scripts.js）
（安裝包命令：npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --save-dev
--save-dev 表示在package.json中寫入創(chuàng)建安裝包的一些依賴字段
import gulp from 'gulp';import gulpif from 'gulp-if';//用gulp語句中做if判斷的
import concat from 'gulp-concat';//gulp中處理文件拼接的
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';//gulp處理的是文件流，對webpack的處理要結合webpackstream
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';//處理js css 壓縮
import {log,colors} from 'gulp-util';//在命令行工具輸出的包
import args from './util/args';//命令行參數(shù)進行解析
//創(chuàng)建腳本編譯的一個任務
gulp.task('scripts',()=>{ return gulp.src([app/js/index.js])
//打開文件
.pipe(plumber({ errorHandler:function(){//處理錯誤邏輯 } }))
.pipe(named())//文件重命名
.pipe(gulpWebpack({//js編譯 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'))
//監(jiān)聽文件，更改后自動刷新
.pipe(gulpif(args.watch,livereload()))})
