Gulp入门安装及应用三

我们接着昨天的继续

（4） css文件压缩

安装：

命令行输入：cnpm install --save-dev gulp-minify-css

使用：

var gulp = require('gulp'); //导入gulp模块 重要

minifyCss = require('gulp-minify-css');

gulp.task('minify-css',function(){

gulp.src('css/*.css') //要压缩的文件

.pipe(minifyCss()) //压缩css

.pipe(gulp.dest('dist/css'));

})

运行任务，命令行输入：gulp minify-css

压缩前：

压缩后：

（5） html文件压缩

安装：

命令行输入：cnpm install --save-dev gulp-minify-html

使用：

var gulp = require('gulp'); //导入gulp模块 重要

minifyHtml = require('gulp-minify-html');

gulp.task('minify-html',function(){

gulp.src('html/*.html') //要压缩的文件

.pipe(minifyHtml()) //压缩html

.pipe(gulp.dest('dist/html'));

})

运行任务，命令行输入：gulp minify-html

压缩前：

压缩后：

（6） 文件合并

安装：

命令行输入：cnpm install gulp-concat

使用：

var gulp = require('gulp'); //导入gulp模块 重要

concat = require('gulp-concat');

gulp.task('concat',function(){

gulp.src('script/*.js') //要合并的文件

.pipe(concat('all.js')) //合并匹配到的js文件并命名为'all.js'

.pipe(gulp.dest('dist/js'));

})

concat = require('gulp-concat');

运行任务，命令行输入：gulp concat

合并前我们的script文件中有一个jquery.js,我把它复制了几份

执行上述代码之后：合并后的代码是dist文件夹下的js文件夹下的all.js文件

这个就是合并后的代码。

（7） 图片压缩

安装：

命令行输入：cnpm install gulp-imagemin //压缩图片的插件

命令行输入：cnpm install imagemin-pngquantn //压缩png图片的插件

使用：

var gulp = require('gulp'); //导入gulp模块 重要

var imagemin = require('gulp-imagemin'); //图片压缩插件

var pngquant = require('gulp-pngquant'); //png图片压缩插件

gulp.task('default',function(){

gulp.src('./*') //要压缩的文件

.pipe(imagemin({

progressive:true,

use:[pngquant()] //使用pngquant来压缩png图片

}))

.pipe(gulp.dest('dist'));

})

concat = require('gulp-concat');

运行任务，命令行输入：gulp //缺省任务名，默认'default'

压缩后的图片比原图小

（8） 自动刷新：当我们修改了代码后，它可以帮助我们自动刷新页面，该插件最好配合谷歌浏览起来使用，且要安装livereload chrome extendsion扩展插件

安装：gulp-livereload

使用：这个要借助网页代理或者是第三方插件下载，推荐使用Browsersync,有兴趣的同学可以自行学习。

（9） less和sass的编译

我们在这里以sass为例说明：

安装：cnpm install gulp-sass

使用：

sass = require('gulp-sass');

gulp.task('compile-sass',function(){

gulp.src('sass/*.scss')

.pipe(sass())

.pipe(gulp.dest('dist/css'));

})

在这里我们新建了一个scss文件，将这个文件编译成css文件

执行任务，命令行输入:gulp compile-sass

编译完成后，我们可以在dist文件夹下的css文件夹中看到编译后的css文件

这样就将我们的scss文件编译成css文件

注：上述使用中的代码均在gulpfile.js中写入

（前端新人，如有错误，欢迎指正！）