1. 基礎架構
2.目錄構建
|--ES6
|--app (前端代碼)
|--css
|--js
|--class
|--test.js (初始化類文件)
|--index.js (入口文件)
|--views (html模版文件)
|--error.ejs (錯誤模版)
|--index.ejs (入口模版)
|--server 服務器
server下命令行:`express -e .`
`-e` 表示腳手架在當前目錄使用 ejs 模板引擎
`.` 表示當前目錄下執行
根目錄下
|--task
|--util
|--args.js 初始化腳本文件(處理 命令行參數)
|--package.json 命令行 npm init ,配置依賴包
安裝所需依賴包
命令行:`npm install + 依賴包名 + --save-dev`
|--.babelrc babel 編譯配置文件
|--gulpfile.babel.js gulp 配置文件,腳本使用了 es6 語法 需要加上 babel
3.創建JS編譯任務腳本
- 命令行處理
// tasks/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 files'
})
.option('verbose',{ // 詳細輸出命令行日誌
boolean:true,
default:false,
describe:'log'
})
.option('sourcemaps',{ // 資源映射,強制生成 sourcemaps
describe:'force the creation of sroucemaps'
})
.option('port',{ // 服務器端口
string:true,
default:8080,
describe:'server port'
})
.argv // 命令行以字符串進行解析
export default args;
- js 處理腳本
//tasks/scripts.js
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 基於 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'; // js,css 壓縮
import {log,colors} from 'gulp-util'; // 命令行輸出,log 和 color 的輸出
import args from './util/args'; // 命令行參數解析
gulp.task('scripts',()=>{ // 創建腳本命令
return gulp.src(['app/js/index.js']) // 打開文件
.pipe(plumber({
errorHandle:function(){ // 處理錯誤,結合 webpack
}
}))
.pipe(named()) // 文件重命名
.pipe(gulpWebpack({ // 編譯,結合 webpack
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())) // 監聽文件變化
})
- 模板處理腳本
// tasks/views.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import livereload from 'gulp-livereload';
import args from './util/args';
gulp.task('pages',()=>{ // 創建 pages 任務
return gulp.src('app/**/*.ejs') // 打開文件,app 下的所有 ejs 文件
.pipe(gulp.dest('server')) // 拷貝
.pipe(gulpif(args.watch,livereload())) // 監聽 熱更新
})
- css 處理腳本
// task/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'))
})
- 服務器任務腳本
// 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)=>{ // 創建 serve 任務
if(!args.watch) return cb(); // 如果不監聽,返回 cb
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]); // 通知服務器做處理
}) // 監聽 server/ 下的 js 和 ejs 文件
gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
server.start.bind(server)()
}); // 監聽路由和應用接口變化
})
- 文件自動監聽
監聽 js css ejs 變化,對應執行響應腳本文件
// tasks/browser.js
import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util'; // gulp 常用工具集合
import args from './util/args';
gulp.task('browser',(cb)=>{ // 創建任務
if(!args.watch) return cb();
gulp.watch('app/**/*.js',['scripts']); // app/中 js發生變化,執行 script 腳本
gulp.watch('app/**/*.ejs',['pages']);
gulp.watch('app/**/*.css',['css']);
});
- 每次清空生成文件
// 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']) // 清空兩個目錄
})
- 串聯腳本
// tasks/build.js
import gulp from 'gulp';
import gulpSequence from 'gulp-sequence'; // 處理包執行順序
gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve'])); // 清目錄->拷css->編譯模板->執行腳本->數組browser->serve
- 默認任務腳本
// tasks/default.js
import gulp from 'gulp';
gulp.task('default',['build']); // 命令行 gulp,自動會找 default 任務
- 引入 tasks 目錄文件
// gulpfile.babel.js
import requireDir from 'require-dir';
requireDir('./tasks'); // 引入 tasks 目錄文件,並執行
- 配置 .babelrc
{
"presets":["es2015"],
"plugins":["transform-decorators-legacy"]
}
- 加粗樣式
// server/app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(require('connect-livereload')()); // 接收熱更新,添加這句話,注意順序
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
npm install + 依賴包名 --save-dev
命令行 gulp --watch 監聽
localhost: 3000 打開