文享日志

gulp压缩文件

Gulp

发表于2017年11月18日01:34:27

0条评论 237次阅读

代码实现如下:

var gulp = require('gulp'),
    uglify = require("gulp-uglify");		//压缩js
    minifyCss = require("gulp-minify-css");		//压缩css
    imagemin = require('gulp-imagemin');	
    pngquant = require('imagemin-pngquant'); //png图片压缩插件

gulp.task('minify-image', function () {
    gulp.src('images/*')
    .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
    }))
    .pipe(gulp.dest('dist/image'));
});


gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考:
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

gulp.task('default',['minify-css','minify-js','minify-image']);

gulp是前端自动化构建工具,使用需要这五个API即可。gulp.src ,gulp.pipe , gulp.dest , gulp.task和gulp.watch()。

gulp.src定义文件来源,pipe是字符流流入的管道函数,在这个函数中对流入的字符做处理,dest用来写文件,task定义任务,watch监视文件变化。总的来说还是比较容易上手的。


//然后是gulp的几种常用插件:

1、gulp-load-plugins自动加载插件。看上面的代码,需要require好多,用这个插件的话,只需要require这个插件就够了,他会自动载入插件

2、gulp-rename。用gulp.dest()方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用gulp-rename插件来改变文件流中的文件名。

3、gulp-minify-html压缩html文件

4、gulp-jshint。js代码检查

5、gulp-concat。文件合并

6、gulp-less。gulp-sass。编译css

7、gulp-ruby-sass。编译css

7、gulp-imagemin插件来压缩jpg、png、gif等图片

8、gulp-livereload插件。当代码变化时,它可以帮我们自动刷新页面

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广