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

栏目: 编程工具 · 发布时间: 6年前

内容简介:使用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

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

查看所有标签

猜你喜欢:

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

C程序设计的抽象思维

C程序设计的抽象思维

Eric S.Roberts / 闪四清 / 机械工业出版社 / 2012-5 / 99.00元

Eric S. Roberts所著的《C程序设计的抽象思维》是一本关于C语言的经典图书。本书共计17章,分为4部分,第一部分概述计算机导论课程中涉及的基本编程概念;第二部分讨论递归算法,其中结合大量示例,有助于读者轻松理解和掌握晦涩的概念;第三部分不仅介绍了用非递归算法实现的抽象数据类型,还提供了一些工具,有助于读者理解数据抽象的概念;第四部分重点介绍采用递归算法实现的抽象数据类型。本书重点突出,......一起来看看 《C程序设计的抽象思维》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具