自動構築

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に導入されたすべてのファイル、ブロック定義でマージgulp-revファイルを定義するバージョン番号gulp-revReplace追加バージョン番号のファイル置換index.html参照ファイルgulp-uglify圧縮JS gulp-csso圧縮CSS gulp-minifyHtml圧縮Html圧縮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')

しかし、Browserifyの代わりにES 6モジュール構文を使用します.
Webpack
モジュール化されたソリューション.プロジェクト構造を解析し、JavaScriptモジュールや他のブラウザで直接拡張できない言語(Scss,Type Script)などを見つけ、ブラウザで使用するために適切なフォーマットに変換してパッケージ化する
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 OccuenceOrderPluginを生成し、コンポーネントにID UglifyJsPlugin圧縮JS ExtractTextPlugin分離CSSとJSファイルCommonsChunkPlugin抽出共通js
Babelコンパイルjavascriptのプラットフォーム(ES 6,ES 7,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定義モジュールを使用できます.