详解webpack+gulp实现自动构建部署
webpack系列目录
webpack系列二：webpack介绍&安装
webpack系列三：webpack如何集成第三方js库
webpack系列四：webpack多页面支持&公共组件单独打包
webpack系列五：webpackLoaders模块加载器
webpack系列六：前端项目模板-webpack+gulp实现自动构建部署
正文
本篇包含以下三点：
1.区分开发环境和生产环境
2.集成gulp
3.package.json配置
前面主要介绍了webpack的一些基础用法，该篇做一个整体介绍，如何集成gulp？如何应对多部署环境？
项目结构说明
. ├──gulpfile.js#gulp任务配置 ├──mock/#假数据文件 ├──package.json#项目配置 ├──README.md#项目说明 ├──src#源码目录 │├──pageA.html#入口文件a │├──pageB.html#入口文件b │├──pageC.html#入口文件c │├──css/#css资源 │├──img/#图片资源 │├──js#js&jsx资源 ││├──pageA.js#a页面入口 ││├──pageB.js#b页面入口 ││├──pageC.js#c页面入口 ││├──helpers/#业务相关的辅助工具 ││├──lib/#没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto等 ││└──utils/#业务无关的辅助工具 │├──scss/#scss资源 │├──pathmap.json#手动配置某些模块的路径，可以加快webpack的编译速度 ├──webpack.config.allinone.js#webpack配置 ├──webpack.config.js#正式环境webpack配置入口 └──webpack-dev.config.js#开发环境webpack配置入口
一：区分dev环境和生产环境
重命名webpack.config.js=>webpack.config.allinone.js
内容上，新增options参数，利用options.debug来控制webpack参数，用来区分开发和生产环境。例如开发环境不需要混淆和压缩js文件，但是开发环境需要。通过option.debug来区分选择相应的loader配置和Plugin：
module.exports=function(options){
options=options||{}
vardebug=options.debug!==undefined?options.debug:true;
......
if(debug){
//
}else{
//
}
新增webpack.config.jswebpack-dev.config.js
//webpack.config.js
'usestrict';
varwebpack_config=require('./webpack.config.allinone')
module.exports=webpack_config({debug:false})
//webpack-dev.config.js
'usestrict';
varwebpack_config=require('./webpack.config.allinone')
module.exports=webpack_config({debug:true})
后续可以根据gulp指令动态选择是开发环境还是测试环境，具体见gulpfile.js
//用于gulp传递参数
varminimist=require('minimist');
varknownOptions={
string:'env',
default:{env:process.env.NODE_ENV||'production'}
};
varoptions=minimist(process.argv.slice(2),knownOptions);
varwebpackConf=require('./webpack.config');
varwebpackConfDev=require('./webpack-dev.config');
var_conf=options.env==='production'?webpackConf:webpackConfDev;
webpack(_conf,function(err,stats){......
二：集成gulp
利用gulp完成以下工作：
- 代码检查
- clean操作
- runwebpackpack
- deploy发布
安装gulp
$npminstallgulpgulp-cleanjshintgulp-jshintjshint-stylishgulp-sftpgulp-utilminimist--save-dev
新增gulpfile.js
完整gulpfile.js如下：
/**
*Createdbysloongon2016/6/14.
*/
'usestrict';
vargulp=require('gulp');
varwebpack=require('webpack');
//用于gulp传递参数
varminimist=require('minimist');
vargutil=require('gulp-util');
varsrc=process.cwd()+'/src';
varassets=process.cwd()+'/dist';
varknownOptions={
string:'env',
default:{env:process.env.NODE_ENV||'production'}
};
varoptions=minimist(process.argv.slice(2),knownOptions);
varwebpackConf=require('./webpack.config');
varwebpackConfDev=require('./webpack-dev.config');
varremoteServer={
host:'192.168.56.129',
remotePath:'/data/website/website1',
user:'root',
pass:'password'
};
varlocalServer={
host:'192.168.56.130',
remotePath:'/data/website/website1',
user:'root',
pass:'password'
}
//checkcode
gulp.task('hint',function(){
varjshint=require('gulp-jshint')
varstylish=require('jshint-stylish')
returngulp.src([
'!'+src+'/js/lib/**/*.js',
src+'/js/**/*.js'
])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
})
//cleanasserts
gulp.task('clean',['hint'],function(){
varclean=require('gulp-clean');
returngulp.src(assets,{read:true}).pipe(clean())
});
//runwebpackpack
gulp.task('pack',['clean'],function(done){
var_conf=options.env==='production'?webpackConf:webpackConfDev;
webpack(_conf,function(err,stats){
if(err)thrownewgutil.PluginError('webpack',err)
gutil.log('[webpack]',stats.toString({colors:true}))
done()
});
});
//defaulttask
gulp.task('default',['pack'])
//deployassetstoremoteserver
gulp.task('deploy',function(){
varsftp=require('gulp-sftp');
var_conf=options.env==='production'?remoteServer:localServer;
returngulp.src(assets+'/**')
.pipe(sftp(_conf))
})
三：package.json配置
scripts配置各个指令
- 启动webpack调试server：npmrunserver
- 测试环境打包:npmrunbuild
- 生产环境打包:npmrunbuild-online
- 发布到测试环境:npmrundeploy
- 发布到生产环境:npmrundeploy-online
完整package.json如下：
{
"name":"webpack-avalon",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"server":"webpack-dev-server--inline",
"build":"gulppack--envdebug",
"build-online":"gulppack--envproduction",
"deploy":"gulpdeploy--envdebug",
"deploy-online":"gulpdeploy--envproduction"
},
"author":"sloong",
"license":"MIT",
"devDependencies":{
"css-loader":"^0.21.0",
"ejs-loader":"^0.3.0",
"extract-text-webpack-plugin":"^1.0.1",
"file-loader":"^0.8.5",
"gulp":"^3.9.1",
"gulp-clean":"^0.3.2",
"gulp-jshint":"^2.0.1",
"gulp-sftp":"^0.1.5",
"gulp-util":"^3.0.7",
"html-loader":"^0.4.3",
"html-webpack-plugin":"^2.19.0",
"jshint":"^2.9.2",
"jshint-stylish":"^2.2.0",
"jsx-loader":"^0.13.2",
"minimist":"^1.2.0",
"node-sass":"^3.7.0",
"sass-loader":"^3.2.0",
"style-loader":"^0.13.0",
"url-loader":"^0.5.7",
"webpack":"^1.13.1",
"webpack-dev-server":"^1.14.1"
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。