前端普通项目gulp打包历程

一、为什么使用打包工具

1.可以解决由于修改某些js和css的版本，而引起的浏览器缓存问题
2.可以解决JavaScript和CSS的依赖问题，也就是引入顺序问题
3.通过对文件合并和文件压缩对性能进行优化
4.通过对代码语法的处理解决在不同浏览器的兼容问题

二、为什么选择gulp

Gulp（http://gulpjs.com） 是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。Gulp被设计得非常简单，所以普通项目使用gulp足够了。复杂的项目可以使用gulp+webpack配合使用。通过下面5种方法就可以支持几乎所有构建场景：
gulp.task注册一个任务；
gulp.run执行任务；
gulp.watch监听文件的变化；
gulp.src读取文件；
gulp.dest写文件。
需要用的常用插件有：

插件名字	功能
gulp-copy	拷贝引用库，字体等文件
gulp-babel	把es6语法解析成es5
gulp-rev	对文件名加MD5后缀
gulp-rev-collector	替换路径
gulp-jsmin	压缩js
gulp-minify-css	压缩css
gulp-imagemin	压缩图片
gulp-htmlmin	压缩html里面的js，css，去除空格
gulp-rename	重命名
gulp-clean	清空文件夹
del	删除文件
gulp-autoprefixer	兼容处理
gulp-replace	替换html内容（将原来.js引用改为.min.js引用）

三、环境以及使用

node -v：v10.21.0
npm -v：v6.14.4
gulp -v :
CLI version: 2.3.0
Local version: 3.9.1

你可能会遇到很多问题是版本问题造成的。我本来node是12，gulp是4的。但是有些语法不适合。总之，遇到版本问题，再百度搜方法解决吧。问题千奇百怪什么都有。我是用nvm控制node的版本的，后来就又发现node版本超过10，nvm下载过来的node包就不完整，导致npm命令不能使用。于是就只好自己下载好node10，再使用nvm管理使其成为当前使用的node版本。
好了，开始步入正题：
1.先把自己的项目归整好，以便打包。
这是我的项目目录：

我的map目录是离线地图资源，不需要打包。后期直接复制过去，我的js目录下有default目录是引用外界插件的，打包之后有发现影响部分功能。所以这部分也不要打包。
首先cmd，进入项目根目录。
（1）npm init
创建package.json文件
（2）npm install --save-dev gulp
在项目根目录下安装gulp，gulp的版本信息会保存在package.json文件中，下载的gulp依赖包会在node_modules里面；
（3）npm install --save-dev gulp-babel gulp-uglify gulp-rev gulp-rev-collector gulp-htmlmin gulp-imagemin del gulp-autoprefixer gulp-minify-css
安装依赖工具
（4）新建一个gulpfile.js的配置文件，
这里编写打包执行的程序；
　　我的项目目录是这样的：这里包括配置文件，依赖包，还有最后输出的文件目录
　　
根据我的目录来配置我的打包入口文件gulpfile.js,代码如下：

var gulp = require('gulp');
var babel = require('gulp-babel');//把es6语法解析成es5
var uglify = require('gulp-uglify');//压缩
var rev = require('gulp-rev');//对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');//替换路径
var htmlmin = require('gulp-htmlmin'); //压缩html里面的js，css，去除空格
var imagemin = require('gulp-imagemin');//压缩图片
var del = require('del');//删除文件
var autoprefix = require('gulp-autoprefixer');//兼容处理
var minifyCss = require('gulp-minify-css');//压缩




//js压缩
gulp.task('js1', function () {
    return gulp.src('./js/*.js')
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest('./build/js'))
        .pipe(rev.manifest('rev-js-manifest.json'))
        .pipe(gulp.dest('./build/js'));
});
//css压缩
gulp.task('style', function () {
    return gulp.src('./css/*.css')
        .pipe(autoprefix({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('./build/css'))
        .pipe(rev.manifest('rev-css-manifest.json'))
        .pipe(gulp.dest('./build/css'));
});

//img
gulp.task('images', function () {
    return gulp.src(['./images/*.jpg', './images/*.png', './images/*.gif', './images/*.ico'])
         .pipe(imagemin({
            optimizationLevel: 3,
             progressive: true,
            interlaced: true
         }))    
        .pipe(gulp.dest('./build/images'))
        .pipe(rev.manifest('rev-images-manifest.json'))//生成一个rev-manifest.json
        .pipe(gulp.dest('./build/images'));//将 rev-manifest.json 保存到 rev 目录内
});

//html压缩
gulp.task('revHtml',function(){
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        babel:true,
        minifyCSS: true//压缩页面CSS
    }
    return gulp.src('./pages/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./build/pages'))
});


gulp.task('clean', function (cb) {
    del(['build/'], cb)
});

gulp.task('revimg', function () {
    //css，主要是针对img替换
    return gulp.src(['./build/**/rev-images-manifest.json', './build/css/*.css'])
        .pipe(revCollector({
            replaceReved: true
        }))
        .pipe(gulp.dest('./build/css'));
});
gulp.task('revjs', function () {
    //css，主要是针对img替换
    return gulp.src(['./build/**/rev-images-manifest.json', './build/js/*.js'])
        .pipe(revCollector({
            replaceReved: true,
            dirReplacements: {
                '../images': '../build/images'
            }
        }))
        .pipe(gulp.dest('./build/js'));
});

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function () {
    //html，针对js,css,img
    return gulp.src(['./build/**/*.json', './pages/*.html'])
        .pipe(revCollector({

            replaceReved: true
        }))
        .pipe(gulp.dest('./build/pages'));
});

//删除Build文件
gulp.task('clean:Build', function () {
    return del([
        './build/**/',
    ]);
});


//执行多个任务gulp4的用法 gulp.series()串行，gulp.parallel()并行
//gulp.task('default', gulp.series('clean:Build', gulp.parallel('js1', 'js2', 'images', 'style', 'copy1', 'copy2', 'copy3'),'rev',function(){}))
// 监听HTML、js、imgs
gulp.task('watch', function () {
    gulp.watch('./js/*.js', ['js1']);
    gulp.watch('./js/default/*.js', ['js2']);
    gulp.watch('./css/fonts/*', ['copy1']);
    gulp.watch('./assets/ajax/*.json', ['copy2']);
    gulp.watch('./map/**', ['copy3']);
    gulp.watch('./css/*.css', ['style']);
    gulp.watch(['./images/*.jpg', './images/*.png', './images/*.gif', './images/*.ico'], ['images']);
    gulp.watch('./pages/*.html', ['revHtml']);
    gulp.watch(['./build/**/rev-images-manifest.json', './build/css/*.css'], ['revimg']);
    gulp.watch(['./build/**/*.json', './pages/*.html'], ['revjs']);
    gulp.watch('./build/**/', ['clean:Build']);
})

// gulp命令：打包代码
gulp.task('default', function () {
    gulp.start('clean:Build', 'js1', 'style', 'revHtml', 'images', 'revimg', 'revjs');
})

对js的处理：这里用babel工具把js转成es5的语法，做兼容处理
（使用babel的时候要创建一个.babelrc文件），而后用gulp-uglify工具压缩代码，
gulp.dest(’./build/js’)是输出的目录，目录不存在会自动创建

rev()这个方法是给文件名后加上Md5的版本号；
rev.manifest()方法是给js生成版本号的清单文件，方便后面文件替换

对css的处理：这里用到的是gulp-autoprefixer工具来处理css的兼容问题，这里强调一点，普通的兼容处理是可以用这个工具来处理的，要是特殊的兼容语法还得在写代码的时候自己加上去，例如flex的兼容用法.css压缩工具：gulp-minify-css，之后的执行同上

（5）.babelrc文件的创建（windows上面创建时：文件名写成：.babelrc. 即可创建成功）

{
    "presets": [
      ["env",{
        "targets":{
          "browers":[
            "last 2 versions",
            "IE >= 11"
          ]
        },
        "useBuiltIns":true
      }]]
  }

我的项目中某些需要IE支持，所以.babelrc文件中就这样设置的。简单的话只写上
{“presets”: [“env”]}即可
（6）gulp
打包就可以了。
在执行打包命令的时候会报一些错，如下：这种情况是拟引入的工具依赖包没有安装，按照提示一个个安装就行。或者某些语法有问题，按照提示改就可以了。
（7）在build目录里边把需要拷贝的拷贝到相应目录下。此时就可以看到build

项目跑起来，就结束了。