前端工程工具（Gulp、Browerify、Webpack、Bower、Yeoman）

#####Gulp：一個NodeJS項目構建工具。 1.全局安裝

npm install -g gulp

或

npm install --global gulp

或開發模式安裝且加入到package.json中

npm install --save-dev gulp

2.經常使用gulp插件

• gulp-react 能夠將jsx文件轉換爲js文件

3.gulpfile.js

var gulp = require('gulp');
gulp.task('default',function(){
    
});
gulp.task('default',['jsx']);//能夠將默認命令指定爲jsx，執行時就能夠直接用指令gulp而非gulp jsx

4.example

gulp.task('jsx',function(){
    gulp.src('./app.jsx')
        .pipe(react())
        .pipe(gulp.dest('./app.js'));
});
gulp.task('sass',function(){
    gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('./css'));
});

#####Browserify：瀏覽器端代碼模塊化工具（可將Node.JS的CommonJS格式的代碼轉換爲瀏覽器可識別的JS），部署時處理代碼依賴，將模塊打包到一塊兒。 1.打包爲單個文件存在的問題：

• 暫時用不到的代碼也會被打包，體積大，首次加載速度慢
• 只要一個模塊更新，整個文件緩存失效

2.解決方案：entry point，入口點技術

3.安裝及簡單實用

npm install browserify --save
browserify roboot.js>bundle.js

4.安裝插件，reactify是將jsx解析爲js，第二個插件是將browserify生成的代碼翻譯成gulp能夠理解的代碼

npm install reactify--save
npm install vinyl-source-stream --save

5.gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
gulp.task('jsx',function(){
    browserify({
        entries:['./app.jsx'],
        transform:[reactify] //過濾等處理爲js代碼
    })
        .bundle()           //打包
        .pipe(source())     //轉換爲gulp能夠理解的
        .pipe(gulp.dest('./'));
});

#####Webpack：增強版browserify，誕生伊始，瞄準的就是大型單頁應用。 1.安裝

npm install -g webpack

2.安裝插件，將jsx文件轉換爲js文件

npm install jsx-loader --save

3.兩大特點

• code splitting能夠自動完成，無需手動處理
• loader能夠處理各類類型的靜態文件，而且支持串聯操做

4.webpack.config.js

module.exports = {
    entry:'./app.jsx',
    output: {
        path:'./',
        filename:'app.js',
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader',
            }
        ]
    }
}

5.演示提取公共代碼

var webpack = require('webpack');
module.exports = {
    entry:{
        app:'./app.jsx',
        app2: './app2.jsx'
    },
    output: {
        path:'./',
        filename:'[name].js',
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugins("common.js")
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader',
            }
        ]
    }
}

#####Bower：爲模塊的安裝、升級和刪除，提供一種統一的、可維護的管理模式。 1.安裝

npm install -g bower

2.經常使用命令

 默認下載至bower_componets目錄下

#安裝模塊
bower install jquery
#github用戶名/項目名
bower install jquery/jquery
#git代碼倉庫地址
bower install git://github.com/user/package.git
#模塊網址
bower install http://example.com/script.js
#更新模塊
bower update
bower update jquery
#卸載模塊（其所依賴的一同被卸載）
bower uninstall jquery
#應用程序已安裝包列表
bower list
#搜索包
bower search bootstrap
#查看包信息
bower info bootstrap
#初始化並生成bower.json文件
bower init
#安裝到bower.json文件中
bower install bootstrap --save

#####Yeoman：經過Grunt和Bower的包裝爲開發者提供一個易用的工做流。 1.安裝

npm install -g yo