首页/前端开发工具/gulp 实现 js、css,img 合并和压缩

gulp 实现 js、css,img 合并和压缩

发布-xiaoming | 浏览量-

实现此功能需要安装的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.35ui.cn/post/20160825744.html

标签gulp

上一条: jquery字符串截取 js几个经常用到的字符串的截取
下一条: 在Windows下执行Linux命令的几种方式

或许你还对下面的文章感兴趣