使用gulp压缩js和css等资源文件

内容简介：使用gulp压缩js和css等资源文件

首先照着官网的 开始步骤 , 将gulp跑起来.

以下代码一共实现:

• js es2016格式转es2015
• js压缩
• css压缩
• 图片压缩
• js&css文件自动增加md5后缀

package.json

{
  "name": "dms",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "babel-preset-es2015": "^6.18.0",
    "gulp-babel": "^6.1.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "imagemin-pngquant": "^5.0.0",
    "pump": "^1.0.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1"

  },
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "gulp-babel": "^6.1.2"
  }
}

gulpfile.js

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    babel = require('gulp-babel'),
    rev = require('gulp-rev'),  //- 对文件名加MD5后缀
    revCollector = require('gulp-rev-collector'), //- 路径替换
    pump = require('pump');

gulp.task('default',  ['uglify','images','cssmin']);

gulp.task('all',  ['images', 'replacejslink']);


//JS压缩
gulp.task('uglify', function(cb) {
  // return gulp.src(['./js/**/*.js', '!./js/**/jquery*', '!./js/**/*.min.js','!./js/**/slideshow.js'], {base: '.'})
  //     .pipe(uglify())
  //     .pipe(babel({
  //           presets: ['es2015']
  //       }))
  //     .pipe(gulp.dest('.'));

    pump([
      gulp.src(['./js/**/*.js', '!./js/**/jquery*', '!./js/**/*.min.js','!./js/**/slideshow.js','!./js/background/plan/ChannelTaskPage.js','!./js/background/plan/InnerTaskPage.js','!./js/plan/ChannelPlanHandInPage.js','!./js/plan/ChannelPlanCheckPage.js','!./js/common/CustomerSearch.js'], {base: '.'}),
      babel({
            presets: ['es2015']
        }),
      uglify(),
      gulp.dest('.')
    ],
    cb
  );
});

//CSS压缩
gulp.task('cssmin', function() {
    return gulp.src('./css/**/*.css', {base: '.'})
        .pipe(cssmin())
        .pipe(gulp.dest('.'));
});
//图片压缩
gulp.task('images', function() {
    // return gulp.src('./images/*.*')
    //     .pipe(imagemin({
    //         progressive: false//,//类型：Boolean 默认：false 无损压缩jpg图片
    //         // use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
    //     }))
    //     .pipe(gulp.dest('./images/'));
});


// CSS MD5
gulp.task('cssmd5',['cssmin'], function(){
  return gulp.src('./css/**/*.css', {base: '.'})
      .pipe(rev())
      .pipe(gulp.dest('.'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('./rev/css'));
});

// JS MD5
gulp.task('jsmd5',['uglify'], function(){
  return gulp.src(['./js/**/*.js', '!./js/**/jquery*', '!./js/**/*.min.js','!./js/**/slideshow.js','!./js/background/plan/ChannelTaskPage.js','!./js/background/plan/InnerTaskPage.js','!./js/plan/ChannelPlanHandInPage.js','!./js/plan/ChannelPlanCheckPage.js','!./js/common/CustomerSearch.js'], {base: '.'})
      .pipe(rev())
      .pipe(gulp.dest('.'))
      .pipe(rev.manifest())
      .pipe(gulp.dest('./rev/js'));
});

// replace css link
gulp.task('replacecsslink',['cssmd5'], function(){
  return gulp.src(['./rev/css/*.json','./../**/*.jsp'], {base: '.'})
      .pipe(revCollector())
      .pipe(gulp.dest('.'));
});

// replace js link
gulp.task('replacejslink',['jsmd5','replacecsslink'], function(){
  return gulp.src(['./rev/js/*.json','./../**/*.jsp'], {base: '.'})
      .pipe(revCollector())
      .pipe(gulp.dest('.'));
});

gulp.task('build', ['uglify','images','cssmin']);

其中执行 gulp all 将会增加md5后缀, 而命令 gulp 不会.

执行gulp all的时候, 因为会生成大量的md5后缀的文件, 为了便于以后的持续集成, 在部署完后, 建议直接删除js 和css 文件夹即可, 或者使用 gulp-dev 插件

目录结构(部分)

.
├── css
│   ├── amazeui.min.css
│   ├── background
│   ├── base.css
│   └── common.css
├── gulpfile.js
├── images
│   ├── 0000.png
│   ├── 2202.jpg
│   ├── 2212.jpg
│   ├── 2306.jpg
│   └── 2413.jpg
├── jedate
│   ├── jquery-1.7.2.js
│   ├── jquery.jedate.js
│   ├── jquery.jedate.min.js
│   └── skin
├── js
│   ├── ajaxfileupload.js
│   ├── amazeui.min.js
│   └── background
├── layer
│   ├── layer.js
│   └── skin
├── package.json
└── sweetAlert
    ├── sweet-alert.css
    ├── sweet-alert.js
    └── sweet-alert.min.js

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。