gulp构建前端项目：压缩css和js，加hash后缀去缓存

1.全局安装 gulp：
npm install --global gulp

2.作为项目的开发依赖（devDependencies）安装
 npm install --save-dev gulp

3.在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4.运行 gulp
gulp

举例

> package.json
{
  "name": "pc",
  "version": "0.0.1",
  "description": "Pages for Staging Financial App",
  "devDependencies": {
    "browser-sync": "*",
    "del": "*",
    "gulp": "*",
    "gulp-asset-rev": "^0.0.15",
    "gulp-concat": "*",
    "gulp-if": "*",
    "gulp-jshint": "*",
    "gulp-less": "^3.3.0",
    "gulp-load-plugins": "*",
    "gulp-minify-css": "^*",
    "gulp-minify-html": "*",
    "gulp-postcss": "^7.0.0",
    "gulp-sass": "*",
    "gulp-size": "*",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "*",
    "gulp-useref": "*",
    "precss": "^2.0.0",
    "pump": "^1.0.2",
    "run-sequence": "*"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "private": true,
  "dependencies": {
    "postcss": "^6.0.6"
  },
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "zitopay",
    "web"
  ],
  "author": "fengwenxin",
  "license": "ISC"
}

gulpfile.js 文件

var gulp = require('gulp');
var less = require('gulp-less');
var uglify = require('gulp-uglify');
var $ = require('gulp-load-plugins')();
var runSequence = require('run-sequence');
var assetRev = require('gulp-asset-rev');
var pump = require('pump');


//压缩js
/*function gulpScripts(app_name) {
    return gulp.src([app_name + '/!*.js']) //源文件下的所有js
        .pipe(assetRev())                 //配置版本号
        // .pipe(uglify())                   //进行压缩，如果需要合并也可加上合并的代码
        .pipe(gulp.dest( "publish/js"));  //复制到目标文件路径
}*/

//复制js插件
function gulpPlulgsScript(app_name) {
    return gulp.src([app_name + '/**/*'])
        .pipe(gulp.dest( "publish/js"));   //复制所有js和插件到目标文件夹
}
//压缩css
function gulpStyles(app_name) {
    return gulp.src([app_name + '/*.css'])
        .pipe(assetRev())
        .pipe($.minifyCss())
        .pipe(gulp.dest("publish/css"));
}
//解析less生成css
function gulpLess(app_name) {
    return gulp.src([app_name + '/*.less'])
        .pipe(less())
        .pipe(assetRev())
        .pipe($.minifyCss())
        .pipe(gulp.dest("publish/css"));
}
//复制所有图片
function gulpImages(app_name) {
    return gulp.src([app_name + '/**/*'])
        .pipe(gulp.dest( "publish/images"));   //复制所有图片到目标文件夹
}

//配置引用的js和css文件
function gulpRevHtml(app_name) {
    gulp.src([ './*.html'])        //源文件下面是所有html
        .pipe(assetRev())          //配置引用的js和css文件，需要的话也可以用minifyHtml压缩html文件
        .pipe(gulp.dest('publish'));  //打包到目标文件夹路径下面
}


//===========建立任务===================
//step1
gulp.task('app_scripts', function(){
    gulpPlulgsScript("js") //移动js插件，不做压缩
});

gulp.task('app_less', function(){
    gulpLess("css");
});

gulp.task('app_styles', function(){
    gulpStyles("css");
});

gulp.task('app_images',function(){
     gulpImages("images");
});

gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){
    gulpRevHtml();
});

//step2:压缩部分js
gulp.task('uglifyJs', function (cb) {
    pump([
            gulp.src([
                'js/*.js',
                '!js/{jquery.waypoints,jquery-1.8.2.min,jquery-1.11.0.min,less-1.3.1.min,prefixfree.min}.js'
            ]),
            uglify(),
            gulp.dest('publish/js')
        ],
        cb
    );
});

//1.加载任务
gulp.task('default',['app_scripts','app_styles','app_less','app_images','app_rev']);

//========2.执行加载兼容性样式前缀============
gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('./css/documentation.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

// gulp.task('default',['css']);

如下所示：

image.png

最后编辑于：2018.01.15 10:37:29