項(xiàng)目構(gòu)建的目錄—?jiǎng)?chuàng)建文件夾
1.文件夾
app 前端代碼
? ? ????js
????????????class
????????????index.js 入口文件
????????css
? ? ????views 前端模板
????????????error.ejs 錯(cuò)誤模板
????????????index.ejs 入口模板
2.server 服務(wù)器代碼
3.tasks 構(gòu)建工具
????????util 放置常見(jiàn)腳本
????????????args.js
4.package.json npm依賴包的配置文件 (用命令創(chuàng)建：npm init)
5. .babelrc babel進(jìn)行編譯時(shí)自動(dòng)尋找的文件。名字不能更改，缺少則babel無(wú)法讀取配置文件 (用命令創(chuàng)建：touch .babelrc)
6. gulpfile.babel.js? gulp配置文件，此處不使用gulpfiles.js，因?yàn)槲覀兪褂玫氖荅S6語(yǔ)法。(用命令創(chuàng)建：touch gulpfile.babel.js)
（1）對(duì)創(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,//默認(rèn)值 開發(fā)環(huán)境
????describe:'min all scripts'
})
//是否監(jiān)聽(tīng)命開發(fā)環(huán)境修改的文件（是否自動(dòng)編譯等） .option('watch',{? boolean:true,default:false, describe:'watch all files'})
//要不要詳細(xì)的輸出命令行執(zhí)行的日志
.option('verbose',{ boolean:true, default:false, describe:'log' })
//強(qiáng)制生成sourcemap .option('sourcemaps',{ describe:'force the creation of sourcemap' })
//設(shè)置服務(wù)器端口 .option('port',{ string:true, default:8080, describe:'server port' })
//表示對(duì)輸入的命令行內(nèi)容以字符串進(jìn)行解析
.argv
（2）創(chuàng)建構(gòu)建腳本對(duì)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語(yǔ)句中做if判斷的
import concat from 'gulp-concat';//gulp中處理文件拼接的
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';//gulp處理的是文件流，對(duì)webpack的處理要結(jié)合webpackstream
import named from 'vinyl-named';//對(duì)文件重命名做標(biāo)志的
import livereload from 'gulp-livereload';//熱更新。文件更改后瀏覽器自動(dòng)更新
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ù)進(jìn)行解析
//創(chuàng)建腳本編譯的一個(gè)任務(wù)
gulp.task('scripts',()=>{ return gulp.src([app/js/index.js])
//打開文件
.pipe(plumber({ errorHandler:function(){//處理錯(cuò)誤邏輯 } }))
.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)聽(tīng)文件，更改后自動(dòng)刷新
.pipe(gulpif(args.watch,livereload()))})
