webpack和gulp的理解与区别

webpack是一个模块打包器（module bundler），gulp是前端自动化构建工具

webpack是 JavaScript 应用程序的模块打包器，强调的是一个前端模块化方案，更侧重模块打包，

我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

 

gulp是前端自动化构建工具，强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事情（代码压缩、合并、编译、浏览器实时更新等），

然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程，自动化构建工具并不能把所有模块打包到一起，也不能构建不同模块之间的依赖关系。

webpack

1.webpack作用

webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。

 

2.webpack的安装

需要node环境

全局安装

npm install --global webpack 

在项目中安装最新版本或特定版本，分别执行以下命令

npm install --save-dev webpack 
npm install --save-dev webpack@ 

 

3.webpack的核心概念

分为 入口(Entry)、加载器(Loader)、插件(Plugins)、出口(Output)

入口(Entry)：入口起点告诉 webpack 从哪里开始，并根据依赖关系图确定需要打包的文件内容。

加载器(Loader)：webpack 将所有的资源（css, js, image 等）都看做模块，但是 webpack 能处理的只是 JavaScript，因此，需要存在一个能将其他资源转换为模块，让 webpack 能将其加入依赖树中的东西，它就是 loader。

loader用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

插件(Plugins)：loader 只能针对某种特定类型的文件进行处理，而 plugin 的功能则更为强大。

在 plugin 中能够介入到整个 webpack 编译的生命周期，Plugins用于解决 loader 无法实现的其他事情，也就是说loader是预处理文件，那plugin 就是后处理文件。

Plugins可对loader打包后的模块文件（bundle.js）进行二次优化处理，例如：代码压缩从而减小文件体积。

Plugins可提供辅助开发的作用：例如：热更新（浏览器实时显示）。

详解文章参考：https://www.cnblogs.com/fps2tao/p/10879910.html

 

4.webpack的打包流程

初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。

开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。

确定入口：根据配置中的 entry 找出所有的入口文件。

编译模块：从入口文件出发，调用所配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

gulp

1.gulp介绍

gulp 是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。

说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理”。

我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

 

2.gulp安装

全局安装 gulp

npm install --global gulp

作为项目的开发依赖（devDependencies）安装

npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('hello', function() {
// 将你的默认的任务代码放在这
  console.log('hello world!');
});
gulp.task('sass',function(){
  return gulp.src('src/main/webapp/static/styles/scss/apply.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/main/webapp/static/styles/css'))
});

运行 gulp

gulp

 

例：

var concat = require('gulp-concat'),
    path = require('path'),
    gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    pump = require('pump'),
    htmlMin = require('gulp-htmlmin'),
    rename = require('gulp-rename'),
    minimist = require('minimist'),
    crypto = require('crypto'),
    fsext = require('fs-extra');

var envOptions = {
    string: 'env',
    default: { env: process.env.NODE_ENV || 'dev' }
};
var options = minimist(process.argv.slice(2), envOptions);

function resolve(file) {
    return path.resolve(`./MidWay/public/bower_components/${file}`);
}
function staticCss(file) {
    return path.resolve(`./static/h5/css/${file}`);
}
function staticJs(file) {
    return path.resolve(`./static/h5/js/${file}`);
}
function staticView(file) {
    return path.resolve(`./static/h5/view/${file}`);
}
function staticHtml(file) {
    return path.resolve(`./static/${file}`);
}

var dist = './MidWay/public/dist/';
var view = './MidWay/templates/default/wap/views/';

gulp.task('scripts', function () {
    return gulp.src([resolve('polyfill/polyfill.min.js'),
    resolve('zepto/zepto.min.js'),
    resolve('layer.mobile-v2.0/layer_mobile/layer.js'),
    resolve('swiper-4.3.5/dist/js/swiper.min.js'),
    resolve('swiper-4.3.5/dist/js/swiper.animate1.0.3.min.js'),
    resolve('qrcodejs/qrcode.min.js'),
    resolve('pubsub/pubsub.min.js'),
    resolve('zepto.mdate/zepto.mdate.min.js'),
    resolve('clipboard.js-master/clipboard.min.js')
    ]).pipe(concat('vendor.js')).pipe(gulp.dest(dist));
});
gulp.task('styles', function () {
    return gulp.src([resolve('animate.css/animate.min.css'),
    resolve('swiper-4.3.5/dist/css/swiper.min.css'),
    resolve('layer.mobile-v2.0/layer_mobile/need/layer-rem.min.css'),
    resolve('zepto.mdate/zepto.mdate.min.css')
    ]).pipe(concat('vendor.css')).pipe(gulp.dest(dist));
});

gulp.task('compress:h5-css', function () {
    return gulp.src([staticCss('h5-framework.css'),
    ]).pipe(concat('h5-framework.css')).pipe(gulp.dest(dist));
});
gulp.task('compress:h5-js', function (cb) {
    pump([
        gulp.src([staticJs('h5-utils.js'), (options.env === 'pro' ? staticJs('h5-config-pro.js') : staticJs('h5-config-dev.js')), staticJs('h5-framework.js'),staticJs('h5-comp-register.js'), staticJs('h5-redpacket.js'), staticJs('h5-games.js')]),
        concat('h5-framework.js'),
        uglify(),
        gulp.dest(dist)
    ], cb);
})
gulp.task('compress:h5-view', function (cb) {
    return gulp.src([staticView('account-binding.html'),
    staticView('appointment.html'),
    staticView('article.html'), 
    staticView('coupon-list.html'),
    staticView('coupon-use.html')
    ]).pipe(htmlMin({
        minifyCSS: true,
        minifyJS:uglify(),
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeComments: true,
        ignoreCustomComments: [/\s*DataConfig\s*[\s\S]*\s*/],
        customAttrAssign: [/\{\{[\s\S]*\}\}/g] 
    })).pipe(gulp.dest(view));
})

gulp.task('compress:utils-js', function (cb) {
    pump([
        gulp.src([staticJs('h5-utils.js')]),
        uglify(),
        gulp.dest(dist)
    ], cb);
})

gulp.task('compress:h5', function (cb) {
    pump([
        gulp.src(staticHtml('h5-page-master.src.html')),
        htmlMin({
            minifyCSS: true,
            minifyJS: true,
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeComments: true,
            ignoreCustomComments: [/\s*DataConfig\s*[\s\S]*\s*/],
            customAttrAssign: [/\{\{[\s\S]*\}\}/g]
        }),
        rename('h5-page-master.html'),
        gulp.dest('./static/')
    ], cb);
})

gulp.task('copy', function () {
    return gulp.src([resolve('qrcodejs/qrcode.min.js')]).pipe(gulp.dest(dist))
})

// 对css、js文件引用的缓存处理
// 通过文件内容生成hash后替换原引用链接地址后面的v=hashkey参数，让浏览器根据hashkey判断内容是否有更新，从而获取最新的引用文件
gulp.task('file-cache', function (cb) {
    async function getHash(fileName) {
        let content = await fsext.readFile(`${dist}/${fileName}`);
        let hash = crypto.createHash("md5");
        hash.update(content);
        return {
            key: fileName,
            value: hash.digest('hex')
        };
    }
    const controlsBasePath = `./MidWay/templates/default/wap/controls/common/`;
    Promise.all([
        // 替换位置在header_includes.html的引用
        Promise.all([
            "vendor.css",
            "h5-framework.css"
        ].map(fileName => { return getHash(fileName) })
        ).then(async function (results) {
            let content = (await fsext.readFile(`${controlsBasePath}/header_includes.html`)).toString("utf-8");
            results.forEach(item => { content = content.replace(RegExp(`/${item.key}\\?v=[^'"]*`), `/${item.key}?v=${item.value}`); });
            await fsext.writeFile(`${controlsBasePath}/header_includes.html`, content);
            return Promise.resolve();
        }),
        // 替换位置在footer_includes.html的引用
        Promise.all([
            "vendor.js",
            "h5-framework.js"
        ].map(fileName => { return getHash(fileName) })
        ).then(async function (results) {
            let content = (await fsext.readFile(`${controlsBasePath}/footer_includes.html`)).toString("utf-8");
            results.forEach(item => { content = content.replace(RegExp(`/${item.key}\\?v=[^'"]*`), `/${item.key}?v=${item.value}`); });
            await fsext.writeFile(`${controlsBasePath}/footer_includes.html`, content);
            return Promise.resolve();
        })
    ]).then(() => {
        cb();
    }).catch((err) => {
        console.error("Cache File Exception", err);
    });
})

gulp.task('compress:js-src', function (cb) {
    pump([
        gulp.src([staticJs('h5-utils.js'), (options.env === 'pro' ? staticJs('h5-config-pro.js') : staticJs('h5-config-dev.js')), staticJs('h5-framework.js'), staticJs('h5-redpacket.js'), staticJs('h5-games.js')]),
        concat('h5-framework-src.js'),
        gulp.dest(dist)
    ], cb);
})


gulp.task('default', ['scripts', 'styles', 'compress:h5-css', 'compress:h5-js', 'compress:h5-view', 'compress:utils-js', 'compress:h5', 'copy', 'file-cache']);
gulp.task('js-src', ['compress:js-src']);