我们接着昨天的继续
(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中写入
(前端新人,如有错误,欢迎指正!)