自动构建部署

Posted 2020-08-07 Leo_wlCnBlogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自动构建部署相关的知识，希望对你有一定的参考价值。

webpack+gulp实现自动构建部署

webpack系列目录

基于webpack搭建纯静态页面型前端工程解决方案模板，最终形态源码见github: https://github.com/ifengkou/webpack-template

正文

本篇包含以下三点：

区分开发环境和生产环境
集成gulp
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 || {}
    var debug = options.debug !==undefined ? options.debug :true;

    ......
     if(debug){
        // 
    }else{
        //
    }

新增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})

后续可以根据gulp 指令动态选择是开发环境还是测试环境，具体见gulpfile.js

//用于gulp传递参数
var minimist = require(\'minimist\');
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 _conf = options.env === \'production\' ? webpackConf : webpackConfDev;
webpack(_conf, function (err, stats) {......

二：集成gulp

利用 gulp 完成以下工作：

代码检查
clean操作
run webpack pack
deploy 发布

安装gulp

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

新增gulpfile.js

完整gulpfile.js 如下：

/**
 * Created by sloong on 2016/6/14.
 */
\'use strict\';

var gulp = require(\'gulp\');
var webpack = require(\'webpack\');

//用于gulp传递参数
var 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 code
gulp.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 asserts
gulp.task(\'clean\', [\'hint\'], function () {
    var clean = require(\'gulp-clean\');
    return gulp.src(assets, {read: true}).pipe(clean())
});

//run webpack pack
gulp.task(\'pack\', [\'clean\'], function (done) {
    var _conf = options.env === \'production\' ? webpackConf : webpackConfDev;
    webpack(_conf, function (err, stats) {
        if (err) throw new gutil.PluginError(\'webpack\', err)
        gutil.log(\'[webpack]\', stats.toString({colors: true}))
        done()
    });
});

//default task
gulp.task(\'default\', [\'pack\'])

//deploy assets to remote server
gulp.task(\'deploy\', function () {
    var sftp = require(\'gulp-sftp\');
    var _conf = options.env === \'production\' ? remoteServer : localServer;
    return gulp.src(assets + \'/**\')
        .pipe(sftp(_conf))
})

三：package.json 配置

scripts 配置各个指令

启动webpack调试server： npm server
测试环境打包: npm build
生产环境打包: npm buildP
发布到测试环境: npm deploy
发布到生产环境: npm deployP

完整package.json 如下：

    {
      "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": "^3.2.0",
        "style-loader": "^0.13.0",
        "url-loader": "^0.5.7",
        "webpack": "^1.13.1",
        "webpack-dev-server": "^1.14.1"
      }
    }