自动化构建

process.env.NODE_ENV读环境变量

Gulp

优化前端开发流程的工具。基于流，gulp.src使用glob定义路径，将匹配文件以pipe流形式导入gulp插件处理
处理完毕通过gulp.dest写入指定目录

task异步方法返回：
1.return pipe
2.return promise
3.callback

gulp.task('scripts', [], function () {
  return gulp.src(path.join(config.paths.www, 'js/**/*.js'))
    //处理angularJs代码注入为annotate模式
    .pipe(glp.ngAnnotate())
    //写入tmp/scripts
    .pipe(gulp.dest(path.join(config.paths.tmp, '/scripts')));
});

//创建浏览器实时刷新
var borowserSync = require('browser-sync').create();

gulp.task('sass', function(){
    return gulp.src('sass/**/*.js')
        //文件改变，浏览器刷新
        .pipe(browserSync.stream())
        //文件改变，局部更新
        .pipe(browserSync.reload({stream:true}));
});

//启动浏览器服务
function browserSyncInit(baseDir, browser) {
  glp.browserSync.init({
    startPath: '/',
    server: './',
    browser: browser,
    port: 8000,
    ui: {
      port: 8001
    },
    notify: false
  });
};

gulp.watch('sass/**/*.scss', ['sass']);
//浏览器刷新
gulp.watch('*.html').on('change', browserSync.reload);

入口文件：
gulpfile.js

常用插件：
browserSync
gulp
gulp-load-plugins
gulp-inject将js，css注入html
gulp-useref将html中引入的所有文件，以block定义合并
gulp-rev文件添加版本号
gulp-revReplace用添加版本号的文件替换index.html中引用文件
gulp-uglify压缩JS
gulp-csso压缩CSS
gulp-minifyHtml压缩Html
gulp-css-spriter雪碧图
gulp-sass编译sass文件为css
gulp-concat合并js
gulp-sequence
browserify

运行
gulp taskName

Gulp + Browserify
CommonJs规范：
模块加载同步, Node也采用CommonJS规范
每个文件就是一个模块，有自己的作用域

module.exports.fun = function(){}
//exports变量指向module.exports
//不能直接将exports = function(){}因为这样等于切断exports与module.exports关系
exports.fun = function()
require('./fun')

但使用ES6模块语法可替代Browserify

Webpack

模块化解决方案。分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接拓展的语言（Scss， TypeScript）等，将其转换打包为合适的格式供浏览器使用

配置devtool节点生成Source Maps
配置devserver组件，实现浏览器监听代码修改

webpack-dev-server（需另安装）
小型Node.js Express服务器，使用webpack-dev-middleware服务webpack包
webpack-dev-server
静态服务器，类似express，只用于开发环境
2种刷新模式：iframe mode, inline mode
启动：webpack-dev-server -open
Hot Module Replacement(HMR)允许修改组件代码后，自动刷新实时预览，只更新部分，而不是页面重载

Loaders
调用外部脚本或工具，实现对不同格式的文件处理

Plugins
拓展Webpack功能，在整个构建过程中生效
Loaders是在打包构建过程中用来处理源文件的(JSX, Scss..),插件并不直接操作单个文件，直接对整个构建过程作用

常用插件
BannerPlugin打包后文件加版权
HtmlWebpackPlugin依据简单index.html模板，生成一个自动引用你打包后JS文件的新index.html
OccurenceOrderPlugin为组件分配ID
UglifyJsPlugin压缩JS
ExtractTextPlugin分离CSS和JS文件
CommonsChunkPlugin提取公共js

Babel
编译javascript的平台（ES6,ES7,JSX)
配置文件.babelrc

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",//打包后的文件存放的地方
        filename: "bundle-[hash].js"//打包后输出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"}
                    {loader:"css-loader", options:{modules:true}}
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ]
};

//打包多页应用的方案
...
entry:{
    'about':'../about.js', 
    'product':'../product.js',
    vendor:['jquery', 'react']}
    plugins:[
        new HtmlWebpackPlugin({
            favicon:'', filename:'../views/about.html',         
            template:'../about.html', 
            chunks:['vendor', 'about']
        }),
        new HtmlWebPackPlugin({...})
    ]
}

运行
生成package.json运行npm init
package.json中"scripts"{"pc-prod": "webpack --config webpack.prod.config.js --display-error-details"}
npm run pc-prod

AMD规范与CommonJS规范

CommonJs规范加载模块是同步的，只有加载完成，才执行后面的操作
AMD规范异加载模块是异步的，允许指定回调函数，使用defined定义模块