gulp 實現 js、css,img 合併和壓縮(轉)

前提條件，知道如何安裝nodejs、gulp，這裏不作介紹，能夠自行google

 

實現此功能須要安裝的gulp工具備以下

npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev

gulp配置文件以下

//在你的項目根目錄下建立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']);
});

執行下看看效果吧

轉載地址： http://www.gowhich.com/blog/621