一只特立独行的猪 一只特立独行的🐷
一只特立独行的🐷
  • 主页
  • web开发
  • 博客笔记
  • 软件工具
  • 随笔杂谈
  • 文章归档
  • 影音欣赏
  • 我的资源
  • 关于我
  • wechat_fill

gulpfile.js配置,压缩html,js,css,img,文件合并

  • 2016-07-24
  • Web开发
  • 评论(0)
<span style="font-size:14px;font-family:SimSun;line-height:2;">gulpfile.js配置,压缩html,js,css,img,文件合并,记录一下,方便下次用。</span> 

<span style="font-size:14px;font-family:SimSun;line-height:2;">实现此功能需要安装的gulp工具:</span> 
npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev
<span style="font-size:18px;">gulpfile.js配置信息如下:</span> 
//在你的项目根目录下创建gulpfile.js,代码如下:

// 引入 gulp
var gulp = require('gulp');

// 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
    imagemin = require('gulp-imagemin'),//图片压缩
    pngcrush = require('imagemin-pngcrush'),
    minifycss = require('gulp-minify-css'),//css压缩
    jshint = require('gulp-jshint'),//js检测
    uglify = require('gulp-uglify'),//js压缩
    concat = require('gulp-concat'),//文件合并
    rename = require('gulp-rename'),//文件更名
    notify = require('gulp-notify');//提示信息

// 压缩html
gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dest'))
    .pipe(notify({ message: 'html task ok' }));

});

// 压缩图片
gulp.task('img', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('./dest/images/'))
    .pipe(notify({ message: 'img task ok' }));
});

// 合并、压缩、重命名css
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dest/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dest/css'))
    .pipe(notify({ message: 'css task ok' }));
});

// 检查js
gulp.task('lint', function() {
  return gulp.src('src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify({ message: 'lint task ok' }));
});

// 合并、压缩js文件
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dest/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dest/js'))
    .pipe(notify({ message: 'js task ok' }));
});

// 默认任务
gulp.task('default', function(){
  gulp.run('img', 'css', 'lint', 'js', 'html');

  // 监听html文件变化
  gulp.watch('src/*.html', function(){
    gulp.run('html');
  });

  // Watch .css files
  gulp.watch('src/css/*.css', ['css']);

  // Watch .js files
  gulp.watch('src/js/*.js', ['lint', 'js']);

  // Watch image files
  gulp.watch('src/images/*', ['img']);
});

Powered by Wordpress, Theme by Wing-magic
©2023 一只特立独行的🐷 All rights reserved
陕ICP备15006707号-5