gulp & webpack整合

为何须要前端工程化？

前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代，近年来不少相关的工具和概念诞生。好奇心日报在进行前端工程化的过程当中，主要的挑战在于解决以下问题：
✦ 如何管理多个项目的前端代码？
✦ 如何同步修改复用代码？
✦ 如何让开发体验更爽？

项目实在太多

以前写过一篇博文 如何管理被多个项目引用的通用项目？，文中提到过好奇心日报的项目偏多（PC/Mobile/App/Pad），要为这么多项目开发前端组件并维护是一个繁琐的工做，而且会有不少冗余的工做。

更好的管理前端代码

前端代码要适配后台目录的规范，原本能够很美好的前端目录结构被拆得四分五裂，前端代码分散不便于管理，而且开发体验很不友好。
而有了前端工程化的概念，前端项目和后台项目能够完全分离，前端按本身想要的目录结构组织代码， 而后按照必定的方式构建输出到后台项目中，简直完美（是否是有种后宫佳丽三千的感受）。

技术选型

调研了市场主流的构建工具，其中包括gulp、webpack、fis，最后决定围绕gulp打造前端工程化方案，同时引入webpack来管理模块化代码，大体分工以下：
gulp：处理html压缩/预处理/条件编译，图片压缩，精灵图自动合并等任务
webpack：管理模块化，构建js/css。

至于为何选择gulp & webpack，主要缘由在于gulp相对来讲更灵活，能够作更多的定制化任务，而webpack在模块化方案实在太优秀（不由自主的赞美）。

怎么设计前端项目目录结构？

抽离出来的前端项目目录结构以下

前端项目结构

appfe目录：appfe就是前面提到的前端项目，这个项目主要包含两部分：前端代码、构建任务
appfe > gulp目录：包含了全部的gulp子任务，每一个子任务包含相关任务的全部逻辑。
appfe > src目录：包含了全部前端代码，好比页面、组件、图片、字体文件等等。
appfe > package.json：这个不用说了吧。
appfe > gulpfile.js：gulp入口文件，引入了全部的gulp子任务。

理想很丰满，现实却很骨感，这么美好的愿望，在具体实践过程当中，注定要花很多心思，要踩很多坑。
好奇心日报此次升级改造即将上线，终于也有时间把以前零零碎碎的博文整合在一块儿，而且结合本身的体会分享给你们，固然将来可能还会有较大的调整，这儿抛砖引玉，你们能够参考思路。

gulp 是什么？

gulp是一个基于流的构建工具，相对其余构件工具来讲，更简洁更高效。
Tip：以前写过一篇gulp 入门，能够参考下，若是对gulp已经有必定的了解请直接跳过。

webpack 是什么？

webpack是模块化管理的工具，使用webpack可实现模块按需加载，模块预处理，模块打包等功能。
Tip：以前写过一篇webpack 入门，能够参考下，若是对webpack已经有必定的了解请直接跳过。

如何整合gulp & webpack

webpack是众多gulp子任务中比较复杂的部分，主要对JS/CSS进行相关处理。
包括：模块分析、按需加载、JS代码压缩合并、抽离公共模块、SourceMap、PostCSS、CSS代码压缩等等...

webpack-stream方案[不推荐]

使用webpack-stream虽然能够很方便的将webpack整合到gulp中，可是有致命的问题存在：
若是关闭webpack的监听模式，那么每次文件变更就会全量编译JS/CSS文件，很是耗时。
若是打开webpack的监听模式，那么会阻塞其余gulp任务，致使其余gulp任务的监听失效。
因此这种方案几乎不可用！

webpack原生方案

直接使用webpack原生方案，相对来讲更灵活。
Tip：代码较复杂，里面涉及的知识点也不少，建议看看形状就好，若是真有兴趣，能够好好研究研究，毕竟花了很长时间去思考这些方案。

// webpack.config.js 关键地方都有大体注释 var _ = require('lodash'); var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var autoprefixer = require('autoprefixer'); var flexibility = require('postcss-flexibility'); var sorting = require('postcss-sorting'); var color_rgba_fallback = require('postcss-color-rgba-fallback'); var opacity = require('postcss-opacity'); var pseudoelements = require('postcss-pseudoelements'); var will_change = require('postcss-will-change'); var cssnano = require('cssnano'); var project = require('./lib/project')(); var config = require('./config.' + project).webpack; // loaders配置 var getLoaders = function(env) { return [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components|vendor)/, loader: 'babel?presets[]=es2015&cacheDirectory=true!preprocess?PROJECT=' + project }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader") }, { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader") }, { test: /\/jquery\.js$/, loader: 'expose?$!expose?jQuery!expose?jquery' }, { test: /\.xtpl$/, loader: 'xtpl' }, { test: /\.modernizrrc$/, loader: "modernizr" }]; }; // 别名配置 var getAlias = function(env) { return { // 特殊 'jquery': path.resolve(__dirname, '../src/vendor/jquery2/jquery.js'), // 正常第三方库 'jquery.js': path.resolve(__dirname, '../src/vendor/jquery2/jquery.js'), }; }; // 插件配置 var getPlugins = function(env) { var defaultPlugins = [ // 这个不只是别名，还能够在遇到别名的时候自动引入模块 new webpack.ProvidePlugin({ '$': 'jquery.js', 'jquery': 'jquery.js', 'jQuery': 'jquery.js', }), // 抽离公共模块 new webpack.optimize.CommonsChunkPlugin('common', 'common.js'), new ExtractTextPlugin( path.join('../../stylesheets', project, '/[name].css'), { allChunks: true } ) ]; if (env == 'production') { // 线上模式的配置，去除依赖中重复的插件/压缩js/排除报错的插件 plugins = _.union(defaultPlugins, [ new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, mangle: { except: ['$', 'jQuery'] } }), new webpack.NoErrorsPlugin() ]); } else { plugins = _.union(defaultPlugins, []); } return plugins; }; // postcss配置 var getPostcss = function(env) { var postcss = [ autoprefixer({ browers: ['last 2 versions', 'ie >= 9', '> 5% in CN'] }), flexibility, will_change, color_rgba_fallback, opacity, pseudoelements, sorting ]; if (env == 'production') { // 线上模式的配置，css压缩 return function() { return _.union([ cssnano({ // 关闭cssnano的autoprefixer选项，否则会和前面的autoprefixer冲突 autoprefixer: false, reduceIdents: false, zindex: false, discardUnused: false, mergeIdents: false }) ], postcss); }; } else { return function() { return _.union([], postcss); } } }; // 做为函数导出配置，代码更简洁 module.exports = function(env) { return { context: config.context, entry: config.src, output: { path: path.join(config.jsDest, project), filename: '[name].js', chunkFilename: '[name].[chunkhash:8].js', publicPath: '/assets/' + project + '/' }, devtool: "eval", watch: false, profile: true, cache: true, module: { loaders: getLoaders(env) }, resolve: { alias: getAlias(env) }, plugins: getPlugins(env), postcss: getPostcss(env) }; }

// webpack任务 var _ = require('lodash'); var del = require('del'); var webpack = require('webpack'); var gulp = require('gulp'); var plumber = require('gulp-plumber'); var newer = require('gulp-newer'); var logger = require('gulp-logger'); var project = require('../lib/project')(); var config = require('../config.' + project).webpack; var compileLogger = require('../lib/compileLogger'); var handleErrors = require('../lib/handleErrors'); // 生成js/css gulp.task('webpack', ['clean:webpack'], function(callback) { webpack(require('../webpack.config.js')(), function(err, stats) { compileLogger(err, stats); callback(); }); }); // 生成js/css-监听模式 gulp.task('watch:webpack', ['clean:webpack'], function() { webpack(_.merge(require('../webpack.config.js')(), { watch: true })).watch(200, function(err, stats) { compileLogger(err, stats); }); }); // 生成js/css-build模式 gulp.task('build:webpack', ['clean:webpack'], function(callback) { webpack(_.merge(require('../webpack.config.js')('production'), { devtool: null }), function(err, stats) { compileLogger(err, stats); callback(); }); }); // 清理js/css gulp.task('clean:webpack', function() { return del([ config.jsDest, config.cssDest ], { force: true }); });

实践中遇到那些坑？

如何组织gulp任务？

因为gulp任务较多，而且每一个核心任务都有关联任务，好比webpack的关联任务就有webpack/watch:webpack/build:webpack/clean:webpack，如何组织这些子任务是一个须要很当心的事情，出于一直以来的习惯：把关联的逻辑放在一块儿，因此个人方案是webpack相关的任务放到一个文件，而后定义了default/clean/watch/build四个入口任务来引用对应的子任务。

webpack任务结构

gulp怎么实现错误自启动

使用watch模式能够更高效的开发，监听到改动就自动执行任务，可是若是过程当中遇到错误，gulp就会报错并终止watch模式，必须从新启动gulp，简直神烦！
利用gulp-plumber能够实现错误自启动，这样就能开心的在watch模式下开发且不用担忧报错了。
进一步结合gulp-notify，在报错时能够获得通知，便于发现问题。

// 错误处理 var notify = require("gulp-notify") module.exports = function(errorObject, callback) { // 错误通知 notify.onError(errorObject.toString().split(': ').join(':\n')) .apply(this, arguments); // Keep gulp from hanging on this task if (typeof this.emit === 'function') { this.emit('end'); } } // 任务 var gulp = require('gulp'); var plumber = require('gulp-plumber'); var project = require('../lib/project')(); // 获得当前的后台项目 var config = require('../config.' + project).views; // 读取配置文件 var handleErrors = require('../lib/handleErrors'); gulp.task('views', function() { return gulp.src(config.src) .pipe(plumber(handleErrors)) // 错误自启动 .pipe(gulp.dest(config.dest)); });

gulp怎么处理同步任务和异步任务

同步任务：gulp经过return stream的方式来结束当前任务而且把stream传递到下一个任务，大多数gulp任务都是同步模式。
异步任务：实际项目中，有些任务的逻辑是异步函数执行的，这种任务的return时机并不能准确把控，一般须要在异步函数中调用callback()来告知gulp该任务结束，而这个callback什么都不是，就是传到该任务中的一个参数，没有实际意义。

// 同步任务 gulp.task('views', function() { return gulp.src(config.src) .pipe(plumber(handleErrors)) .pipe(gulp.dest(config.dest)); }); // 异步任务 gulp.task('webpack', function(callback) { webpack(config, function(err, stats) { compileLogger(err, stats); callback(); //异步任务的关键之处，若是没有这行，任务会一直阻塞 }); });

webpack怎么抽出独立的css文件

webpack默认是将css直接注入到html中，这种方法并不具备通用性，不推荐使用。
结合使用extract-text-webpack-plugin，能够生成一个独立的css文件，extract-text-webpack-plugin会解析每个require('*.css')而后处理输出一个独立的css文件。

// webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { 'homes/index': 'pages/homes/index.js' }, output: { filename: "[name].js" }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }] }, plugins: [ new ExtractTextPlugin("[name].css") ] }

webpack怎么抽出通用逻辑和样式

没有webpack以前，想要抽离出公共模块彻底须要手动维护，由于js是动态语言，全部依赖都是运行时才能肯定，webpack能够作静态解析，分析文件之间的依赖关系，使用CommonsChunkPlugin就能够自动抽离出公共模块。

// webpack.config.js var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { 'homes/index': 'pages/homes/index.js' }, output: { filename: "[name].js" }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }] }, plugins: [ //抽离公共模块，包含js和css new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"), new ExtractTextPlugin("[name].css") ] }

webpack的watch模式

webpack相对来讲比较耗时，尤为是项目较复杂时，须要解析的文件较多。好奇心日报web项目首次全量执行webpack任务大概须要10s，因此必须引入增量构建。增量构建只须要简单的给webpack配置添加watch参数便可。

webpack任务输出日志

可是问题在于，若是给webpack-stream添加watch参数，webpack-stream的任务会阻塞其余的watch任务，最后致使其余任务的增量构建失效。
因此若是要使用webpack的增量构建，须要使用原生的webpack方案！

灵活的webpack入口文件

webpack入口文件接收三种格式：字符串，数组，对象，对于多页应用场景，只有对象可以知足条件，因此咱们把全部的入口文件所有列出来便可。
但这种方案极不灵活，借鉴gulp的方案，是否能够读取某个文件下的全部入口文件呢？为了解决这个问题，自定义了一个函数来实现该功能。

//获取文件夹下面的全部的文件(包括子文件夹) var path = require('path'), glob = require('glob'); module.exports = function(dir, ext) { var files = glob.sync(dir + '/**/*.' + ext), res = {}; files.forEach(function(file) { var relativePath = path.relative(dir, file), relativeName = relativePath.slice(0, relativePath.lastIndexOf('.')); res[relativeName] = './' + relativePath; }); return res; };

webpack的development/production配置合并

webpack任务的development配置和production配置差别巨大，而且各自拥有专属的配置。
因为webpack.config.js默认写法是返回一个对象，对象并不能根据不一样条件有不一样的输出，因此将webpack.config.js改为函数，经过传入参数来实现不一样的输出。

// 其中定义了getLoaders，getAlias，getPlugins，getPostcss函数
// 都是为了解决development配置和production配置的差别问题
// 既最大程度的复用配置，又容许差别的存在
module.exports = function(env) {
    return {
 context: config.context,  entry: config.src,  output: {  path: path.join(config.jsDest, project),  filename: '[name].js',  chunkFilename: '[name].[chunkhash:8].js',  publicPath: '/assets/' + project + '/' },  devtool: "eval",  watch: false,  profile: true,  cache: true,  module: {  loaders: getLoaders(env) },  resolve: {  alias: getAlias(env) },  plugins: getPlugins(env),  postcss: getPostcss(env) }; }

webpack怎么线上模式异步加载js文件

webpack能够将js代码分片，把入口文件依赖的全部模块打包成一个文件，可是有些场景下的js代码并不须要打包到入口文件中，更适合异步延迟加载，这样能最大程度的提高首屏加载速度。
好比好奇心日报的登陆浮层，这里面包含了复杂的图片上传，图片裁剪，弹框的逻辑，可是它不必打包在入口文件中，反倒很适合异步延迟加载，只有当须要登陆/注册的时候才去请求。

图片上传裁剪

咱们能够经过webpack提供的require及require.ensure来实现异步加载，值得一提的是，除了指定的异步加载文件列表，webpack还会自动解析回调函数的依赖及指定列表的深层次依赖，并打包成一个文件。

可是实际项目中还得解决浏览器缓存的问题，由于这些异步JS文件的时间戳是rails生产的，对于webpack是不可知的，也就是说请求这个异步JS文件并不会命中。
为了解决这个问题，咱们在rails4中自定义了一个rake任务：生产没有时间戳版本的异步JS文件。

rake任务

上图中还有一个小细节就是，这些异步JS文件有两个时间戳，前者为webpack时间戳，后者为rails时间戳，之因此有两个时间戳，是为了解决浏览器缓存的问题。

简而言之就是：
经过require/require.ensure，来生成异步JS文件，解决异步加载的问题。
经过自定义rake任务，来生成没有rails时间戳的异步JS文件，解决webpack不识别rails时间戳的问题。
经过webpack的chunkFileName配置，给异步JS文件加上webpack时间戳，解决浏览器缓存的问题。

 

学习过程当中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群343599877，咱们一块儿学前端！