Gulp4 下构建WEB项目，进行 压缩、清除缓存

 

目录结构

 

 

 

 

 

 

 

 

最近需要打包功能，搜到了一篇文章：https://www.jianshu.com/p/a37457cfbf3f，本文是根据这篇文章上的代码来写的。

使用的是gulp4，使用时遇到了一些坑，也有可能是我配置有问题.......

如： gulp4的写法有改变，使用 gulp-rev-all 生成的文件与 gulp-rev 生成的配置文件名字不对应问题(我是把整个项目移入过去构建的)

本文无需配置任何配置文件，直接开花就完事了。

解决方案：

    ( 需对gulp有一定了解 )

   （新建个目录，将package.json 放置当前目录中，然后使用命令行cd到当前目录，输入npm install）

   （然后在当前目录新建个文件夹,名为web，将项目放置该目录里。然后输入gulp即可）

    1. package.json 文件   输入 npm install  即可

{
  "name": "pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "merge-stream": "^1.0.1"
  },
  "dependencies": {
    "del": "^4.1.1",
    "gulp-clean-css": "^4.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-rev-all": "^1.0.0",
    "gulp-rev-collector": "^1.1.1",
    "gulp-uglify": "^3.0.2",
    "through2": "^3.0.1"
  }
}

    2. 在 gulpfile.js 中加入如下代码

​
var gulp = require('gulp'),
    revC = require('gulp-rev-collector'),   // 重构文件内的路径引用
    RevAll = require('gulp-rev-all'),   // 清除缓存，重构文件名
    cssMin = require('gulp-clean-css'), //css压缩
    rename = require('gulp-rename'),    //重命名
    uglify = require('gulp-uglify'),    //js压缩
    clearAll = require('del');  //删除文件
    
    

//开发构建

//定义特殊文件(图片，字体文件等,会在任务开始前就移入至min文件夹)
var resource = [
    "web/**/*",
    "!web/**/*.js",
    "!web/**/*.css",
    "!web/**/*.html"
];

//定义css、js、html源文件路径
var cssSrc = 'web/**/*.css',
    jsSrc = 'web/**/*.js',
    htmlSrc = 'web/**/*.html';


//将除了css,js,html 的资源先移入至目标目录
gulp.task('moveResource', function() {
    return gulp.src(resource)       //指定获取到src下的所有css文件。
        .pipe(gulp.dest('min'));//生成目标压缩css文件
});

// css打版本
gulp.task('revCss', function() {
    return gulp.src(cssSrc)       //指定获取到src下的所有css文件。
        .pipe(cssMin({
            compatibility: 'ie8',    //兼容IE8
            rebase: false  //禁用引用路径重新定位，避免定位后找不到该文件问题
        }))     //执行压缩操作
        .pipe(RevAll.revision({ hashLength: 10 }))
        .pipe(gulp.dest('min'))
        .pipe(RevAll.manifestFile())
        .pipe(rename({     //重命名
            suffix: '.css'
        }))
        .pipe(gulp.dest('min'));//生成目标压缩css文件
});

// js打版本
gulp.task('revJs',function () {
    return gulp.src(jsSrc)        //指定获取到src下的所有js文件。
        .pipe(uglify())         //执行压缩操作
        .pipe(RevAll.revision({hashLength: 10 }))
        .pipe(gulp.dest('min'))
        .pipe(RevAll.manifestFile())
        .pipe(rename({
            suffix: '.js'
        }))
        .pipe(gulp.dest('min'));//生成目标压缩js文件
});

//Html替换css、js引用文件版本
gulp.task('revHtml', function () {
    return gulp.src(['min/*.json', htmlSrc,"min/**/*.js"])
        .pipe(revC())
        .pipe(gulp.dest('min'));
});

//清空dist文件夹
gulp.task('clearAll', function () {
    return clearAll('min');
});

gulp.task('dev', gulp.series('moveResource','revCss','revJs','revHtml'));

// 开发js、css打版本入口
gulp.task('g', gulp.series('clearAll','dev',function(){}));

​

    3. 在 项目目录下 创建个 web 文件夹，把需要构建的项目放在里面

    4. 在终端运行  gulp 即可

 

完结，   参考文章： https://www.jianshu.com/p/a37457cfbf3f