WEBPACK+GULP for Automated Build deployment

Project Structure Description

. ├──Gulpfile.JS # Gulp Task Configuration ├──mock/# fake data file ├──Package.JSON # project configuration ├──Readme.MD # project Description ├──SRC # source Directory │├──PageA.HTML # Portal File a│├──PageB.HTML # Portal File b│├──Pagec.HTML # Portal File c│├──css/# CSS Resource │├──img/# picture Resource │├──js # JS&AMP;JSX Resources ││├──pagea. JS # a page entry │  │  ├──pageb. JS # b page Entry │  │  ├──pagec. JS # c Page Entry │  │  ├──helpers/# Business-related AIDS │  │  ├──lib/# not stored in NPM third-party libraries or downloaded for storage To a local base library, such as jquery, Zepto, etc. │  │  └──utils/# Business-agnostic Accessibility │  ├──scss/# SCSS Resources │  ├ ──pathmap. JSON # Manually configure the path of some modules to speed up Webpack compilation speed ├──webpack. Config. allinone. js # webpack configuration ├──webpack. Config. JS # formal Environment webpack configuration portal └──webpack-dev.config.< Span class= "at" >JS # development Environment Webpack Configuration portal            

One: Differentiate dev environment and production environment Rename webpack.config.js = Webpack.config.allinone.js

Content, new options parameters, using Options.debug to control the Webpack parameters, to distinguish between development and production environment. For example, the development environment does not need to confuse and compress JS files, but the development environment requires. Select the appropriate loader configuration and plugin by Option.debug:

module.exports = function(options){    options = options || {}    var debug = options.debug !==undefined ? options.debug :true; ...... if(debug){ // }else{ // }

New Webpack.config.js Webpack-dev.config.js

//webpack.config.js‘use strict‘;var webpack_config = require(‘./webpack.config.allinone‘) module.exports = webpack_config({debug:false})//webpack-dev.config.js‘use strict‘;var webpack_config = require(‘./webpack.config.allinone‘) module.exports = webpack_config({debug:true})

Follow-up can be based on the Gulp command dynamic selection is the development environment or test environment, specifically see Gulpfile.js

For Gulp Pass parametersvar minimist =Require Minimist '); var knownoptions = {string:  ' env ',  Default: {Env:process.env.NODE_ENV | |  ' production '}; var options = Minimist (Process.argv.slice (2), knownoptions); Span class= "Hljs-keyword" >var webpackconf = require (var Webpackconfdev = require (var _conf = options.env = =  ' production '? Webpackconf: Webpackconfdev;webpack (_conf, function ( err, stats) {...... 

II: Integrated Gulp

Use Gulp to complete the following tasks:

• Code Check
• Clean operation
• Run Webpack Pack
• Deploy release

Installing Gulp

install gulp gulp-clean jshint gulp-jshint jshint-stylish gulp-sftp gulp-util minimist --save-dev

New Gulpfile.js

The complete gulpfile.js is as follows:

/** * Created by Sloong on 2016/6/14. */' Use strict ';var gulp =Require' Gulp ');var webpack =Require' Webpack ');For Gulp Pass parametersvar minimist =Require' Minimist ');var gutil =Require' Gulp-util ');var src = process.cwd () +'/src ';var assets = PROCESS.CWD () +'/dist ';var knownoptions = {string:' Env ',Default: {Env:process.env.NODE_ENV | |' Production '};var options = minimist (Process.argv.slice (2), knownoptions);var webpackconf =Require'./webpack.config ');var Webpackconfdev =Require'./webpack-dev.config ');var remoteserver = {host:' 192.168.56.129 ', RemotePath:'/data/website/website1 ', User:' Root ', pass:' Password '};var localserver = {host:' 192.168.56.130 ', RemotePath:'/data/website/website1 ', User:' Root ', pass:' Password '}Check Codegulp.task (' Hint ',function () {var jshint =Require' Gulp-jshint ')var stylish =Require' Jshint-stylish ')Return GULP.SRC (['! ' + src +'/js/lib/**/*.js ', SRC +'/js/**/*.js '). Pipe (Jshint ()). Pipe (Jshint.reporter (stylish));})Clean Assertsgulp.task (' Clean ', [' Hint '],function () {var clean =Require' Gulp-clean ');Return Gulp.src (assets, {read:true}). Pipe (Clean ())});Run Webpack Packgulp.task (' Pack ', [' Clean '],function (Done) {var _conf = Options.env = = =' Production '? Webpackconf:webpackconfdev; Webpack (_conf,function (Err, stats) {if (ERR)ThrowNew Gutil. Pluginerror (' Webpack ', err) gutil.log (' [Webpack] ', stats.tostring ({colors: true})) done ()}); //default taskgulp.task (' default ', [' Pack '])//deploy assets to remote servergulp.task (' deploy ', function () { var sftp = require (' gulp-sftp '); var _conf = options.env = = = ' production '? Remoteserver:localserver; return Gulp.src (assets + '/** '). Pipe (SFTP (_conf))})          

Three: Package.json configuration

Scripts Configuring individual Directives

• Start Webpack Debug SERVER:NPM server
• Test environment Packaging: NPM Build
• Production environment Packaging: NPM BUILDP
• Publish to test environment: NPM Deploy
• Publish to production: NPM DEPLOYP

The complete Package.json is as follows:

    {"Name":"Webpack-avalon","Version":"1.0.0","description":"","Main":"Index.js","Scripts":{"Server":"Webpack-dev-server--inline","Build":"Gulp Pack--env Debug","BUILDP":"Gulp Pack--env Production","Deploy":"Gulp Deploy--env Debug","Deployp":"Gulp Deploy--env Production"},"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" : < Span class= "hljs-string" > "^3.2.0"  "Style-loader" Span class= "OP" >:  "^0.13.0"  "Url-loader" :  "^0.5.7"  "Webpack" :  "^1.13.1"  "Webpack-dev-server" :  "^1.14.1" } }   

# # Development Requirements # #

Contract/src/*.html for the application of the entry file, in the/src/js/level directory need to have a JS file with the same name as the entrance to the file.

# # compilation (Test/dev Environment) # #

$ NPM Run Build

# # Compilation (production environment) # #

Production environment for JS obfuscation compression, CSS, HTML compression, character substitution and other processing

$ NPM Run BUILDP

# # Deployment Release # #

Configure LocalServer and RemoteServer in Gulpfile.js, publish the Dist directory to the server after compiling

Publish to LocalServer

$ NPM Run Deploy

Publish to RemoteServer

$ NPM Run Deployp

# # Local Debugging # #

$ NPM Run Server

# or two different modes below

$ webpack-dev-server

$ webpack-dev-server--inline

# # Jenkins Continuous Integration # #

Need Nodejs

$ NPM Run BUILDP

$ NPM Run Deployp

WEBPACK+GULP for Automated Build deployment