gulp+webpack工作流探索

概述

最近研究了下工作流，先说一下我司的情况，我司现在是pc端用php直出，h5用vuejs构建，vuejs部分就不进行描述了，因为网上的构建方法都是很成熟的了。
以下是php直出，需要向后台同学提供html文件的构建方法。调试都是在本地调试的，调试完成后打包生成html交付给后台同学。

http-server 模拟数据，调试ajax

webpack 打包js，模块化管理

gulp打包css，压缩css, 压缩图片

项目目录

|- apps //html文件  |- dist      |- css //存放压缩打包后的css      |- js //webpack 自动打包的js      |- images //压缩后的图片      //这里还有打包后的html文件  |- mock //模拟数据，json  |- ssi //生成的ssi页面片  |- js //js源文件      |- common 公共模块      |- 业务js  |- css       |- sass //sass源文件          |- common 公共sass函数          |- 业务css      |- stylesheets //编译后的css 开发时引入 compass编译  |- images      原图片  

修改依赖包内容

因为rev默认生成的版本号是加在静态文件文件名上的，如main-d3id7340.js这样会造成服务器上有n多的js，所以我们希望生成main.js?v=233333这样的版本号，在配合ssi就能很好的维护，以后如果只涉及修改静态文件的时候，就只用重新上传静态文件和ssi页面片就可以了，不需要再去改php中的引用，所以在网上找到了一个方法。

打开node_modulesgulp-revindex.js

第133行 manifest[originalFile] = revisionedFile;更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打开nodemodulesgulp-revnodemodulesrev-pathindex.js

10行 return filename + '-' + hash + ext;更新为: return filename + ext;

打开node_modulesgulp-rev-collectorindex.js

31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {更新为: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

gulp打包

gulpfile.js如下

var gulp = require('gulp');
var minicss = require('gulp-cssmin');
var useref = require('gulp-useref');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var gulpif = require('gulp-if');
var yargs = require('yargs');
var rev = require("gulp-rev");
var revCollector = require("gulp-rev-collector");
var replace = require("gulp-replace");
var runSequence = require('run-sequence');

var output = "dist";
//获取输入的参数
var argv = yargs.argv,
name = argv.name,
type;

if(argv.type == "pub"){
type = "";
}else if(argv.type == "test"){
type = ".test"
}

//合并html里用到的css
gulp.task('csscombine',function(){
return gulp.src('apps/'+name+'/')
.pipe(useref())
.pipe(gulpif('.css', minicss()))
.pipe(gulp.dest("dist"));

});

//压缩css,生成css版本号
gulp.task('css', function(){
return gulp.src('dist/css/'+name+'/*.css')
.pipe(rev())
.pipe(gulp.dest('dist/css/'+name))
.pipe( rev.manifest() )
.pipe( gulp.dest( 'rev/css' ) );
});

//生成js版本号
gulp.task('js', function(){
return gulp.src('dist/js/'+name+'/*.js')
.pipe(rev())
.pipe(gulp.dest('dist/js/'+name))
.pipe( rev.manifest() )
.pipe( gulp.dest( 'rev/js' ) );
});

//压缩图片
gulp.task("imagemin", function(){
return gulp.src('images/'+name+'/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(output + '/images/'+name));
})

//生成cssi页面片
gulp.task("cssi",function(){
return gulp.src(['rev/ /*.json','ssi/cssi/cssi.html'])
.pipe(replace('{name}',name))
.pipe(replace('{type}',type))
.pipe( revCollector())
.pipe(gulp.dest("ssi/cssi/"+name));
});

//生成jsi页面片
gulp.task("jsi", function(){
return gulp.src(['rev/ /*.json','ssi/jsi/jsi.html'])
.pipe(replace('{name}',name))
.pipe(replace('{type}',type))
.pipe( revCollector())
.pipe(gulp.dest("ssi/jsi/"+name));
});

//替换html里的路径
gulp.task("replacehtml",function(){
var scriptReg = new RegExp("","g");
var scriptResult = '';
var cssReg = new RegExp("","g");
var cssResult = '';
return gulp.src('dist/'+name+'.html')
.pipe(replace(scriptReg,scriptResult))
.pipe(replace(cssReg,cssResult))
.pipe(replace('../../images/'+name+'/','//assets'+type+'.cm233.com/dist/images/'+name+'/'))
.pipe(gulp.dest("dist"))
});

//主函数,打包
gulp.task('package', function() {

if(!argv.name){
console.log("请输入打包项目");
return ;
}
if(!argv.type){
console.log("请输入打包类型! pub-发布 test-测试");
return ;
}

runSequence('csscombine',
['css','js','imagemin'],
['cssi','jsi'],
'replacehtml',
function(){
console.log("打包成功")
});

});

按需打包

与网上一些不同的是，这个要求开发者输入参数name和type，这样每次打包的时候就不用把整个项目都打包了，只打包需要打包的项目。

合并css部分，需要在html里做下处理

生成ssi部分，要先创建模板文件，根据压缩css和js时生成的版本号，把相应的名字和版本号替换掉，然后在html里把引用脚本的路径改为ssi引用即可

webpack配置

webpack.config.js，仅用于处理js模块依赖

var webpack = require('webpack');
var fs = require('fs');
var path = require("path");
var srcDir = './'

function getEntry() {
var jsPath = path.resolve(srcDir, 'js/page');
var dirs = fs.readdirSync(jsPath);
var matchs = [], files = {};
dirs.forEach(function (item) {
matchs = item.match(/(.+).js$/);
if (matchs) {
files[matchs[1]] = path.resolve(srcDir, 'js/page', item);
}
});
return files;
}

module.exports = {
devtool: "source-map", //生成sourcemap,便于开发调试
entry: getEntry(), //获取项目入口js文件
output: {
path: path.join(__dirname, "dist/js"), //文件输出目录
// publicPath: path.join("dist/js/"), //用于配置文件发布路径，如CDN或本地服务器
filename: "[name]/[name].js", //根据入口文件输出的对应多个文件名
},
module: {
//各种加载器，即让各种文件格式可用require引用
loaders: [
{ test: /.js$/, loader: "babel"},
]
},
resolve: {
//配置别名，在项目中可缩减引用路径
alias: {
jquery: path.resolve(srcDir, "dist/js/lib/jquery-1.12.4.min.js"),
module: path.resolve(srcDir, "js/module")
}
},
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
},
plugins: [
//js文件的压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};

模拟数据

http-server可以用项目目录生成的url模拟ajax请求(只有get)，直接把json放在里面，然后根据项目目录的url就可以访问。但是交付的时候要记得换掉url，其实也可以自动化一下，要与后台约定好目录结构，然后打包的时候用gulp替换。

总结

在思考工作流的时候，思考最多的就是如何在php直出并且由后端同事写模版文件的情况下做好交付html和后期脱离后端同事进行静态文件维护，好像除了用nginx ssi没什么其他好办法再不改模版文件的情况下更换静态文件（因为要加时间戳防止缓存）。本地调试还是有很多不科学的地方，比如模拟数据这里，可能更换成真实接口的数据会出现其它的意外情况，填充模版后也可能会出现影响js执行的情况，有条件的，还是弄个开发机来调试比较好。

关键字：JavaScript, gulp

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！