详解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" } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。