前端自动化构建之 gulp 合并 压缩 加版本号

先安装nodejs

cmd 控制台

cd到网站目录下

安装gulp及一些用到的插件

npm install -g gulp
npm install --save-dev gulp
npm install --save-dev gulp-watch
npm install --save-dev require-dir
npm install --save-dev gulp
npm install gulp-rev gulp-rev-collector --save-dev

还有其它这里没有一一列出

也可以用package.json文件直接还原包：

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-asset-rev": "0.0.15",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^3.0.1",
    "gulp-filter": "^5.1.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-less": "^3.4.0",
    "gulp-replace": "^0.6.1",
    "gulp-rev": "^8.1.1",
    "gulp-rev-replace": "^0.4.4",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.1.4",
    "gulp-watch": "^5.0.0",
    "require-dir": "^0.3.2"
  },
  "name": "gulp",
  "version": "1.0.0",
  "description": "felix",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-watch": "^5.0.0",
    "require-dir": "^0.3.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulpfile.js：

var gulp = require('gulp');
var rev = require('gulp-rev');/*给文件用哈希码添加版本号*/
var revReplace = require('gulp-rev-replace');/*更新引用*/
var useref = require('gulp-useref');/*合并文件*/
var filter = require('gulp-filter');/*过滤器：筛选，恢复*/
var uglify = require('gulp-uglify');/*压缩js*/
var csso = require('gulp-csso');/*压缩css*/
var concat = require('gulp-concat'); //引用 

var assetRev = require('gulp-asset-rev'); 
var replace = require('gulp-replace')
var imageMin = require('gulp-imagemin');

gulp.task('rev', ['revjs'], function () {
    gulp.src("*.html").pipe(replace(/\?v=\w*/g, ''))
        .pipe(assetRev())
        .pipe(gulp.dest(''));
});

gulp.task('revjs', function () {
    return    gulp.src(['js/*.js']).pipe(concat('main.min.js')).pipe(uglify({ mangle: { toplevel: true } })).pipe(gulp.dest('js/build/'));
});

vs2017的效果：