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

2019独角兽企业重金招聘Python工程师标准>>>

#####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 

转载于:https://my.oschina.net/jediKnight/blog/516834