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定义模块
网友评论