我们在前两篇文章中介绍了gulp环境搭建和配置，也简单的讲了一个css代码压缩的插件。因为gulp插件实在是太多，没有办法给童靴们一一去讲了，望童靴们见谅。
下面附上小编初学gulp时配置的一个项目的代码，供大家学习与参考。
安装插件的命令行：cnpm install 插件名 --save-dev
var gulp = require("gulp"),
del = require("del"), //清空数据
concat = require("gulp-concat"), //文件合并
rename = require("gulp-rename"), //重命名
sass = require("gulp-ruby-sass"), //sass编译
less = require('gulp-less'), //less编译
minifyCss = require("gulp-minify-css"), //css压缩
cleancss = require('gulp-clean-css'),
autoprefixer = require("gulp-autoprefixer"), //自动补全css前缀
uglify = require("gulp-uglify"), //js压缩
jshint = require("gulp-jshint"), //js格式检查
notify = require("gulp-notify"), //消息通知
connect = require('gulp-connect'), //WEB测试服务器
livereload = require("gulp-livereload"), //自动刷新
cache = require("gulp-cache"), //图片缓存，只有图片替换了才压缩
images = require("gulp-imagemin"), //图片压缩
pngquant = require('imagemin-pngquant'), //图片压缩
gulpReactify = require('gulp-reactify'),
reactTools = require('react-tools'),
browserSync = require('browser-sync').create();
var path={
src : "src/",
html : "src/html/",
css : "src/css/",
js : "src/js/",
sass : "src/sass/",
img : "src/images",
}
/*-----------------移动html---------------*/
gulp.task("html",function(){
return gulp.src(path.html+'**/*')
.pipe(gulp.dest("dist/html"))
.pipe(browserSync.stream());
})
gulp.task("html1",function(){
return gulp.src(path.src+'*.html')
.pipe(gulp.dest("dist"))
.pipe(browserSync.stream());
})
/*-----------------压缩css---------------*/
gulp.task("minifyCss",function(){
return gulp.src(path.css+'*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
})
/*-----------------压缩js---------------*/
gulp.task("uglify",function(){
return gulp.src(path.js+"*.js")
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
})
/*-----------------复制目录---------------*/
gulp.task('copy', function() {
return gulp.src('src/js/public/**/*')
.pipe(gulp.dest('dist/js/public'))
});
/*---------------- 编译 SASS 自动补全前缀 ----------------*/
//gulp.task('sass', function(){
//return sass(path.sass+'*.scss')
//.pipe(autoprefixer({browsers: ['last 2 versions', 'safari 5', 'opera 12.1', //'ios 6', 'android 4']}))
// .pipe(gulp.dest(path.css))
//.pipe(minifyCss())
//.pipe(gulp.dest('dist/css'))
//.pipe(browserSync.stream());
//});
/*---------------- 压缩图片 ----------------*/
gulp.task('images', function(){
return gulp.src('src/images/*.{png,jpg,gif,ico}')
.pipe(cache(images({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(images({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('dist/images'))
});
/*---------------- Clean ----------------*/
//gulp.task('clean',del.bind(null,['dist/**/*']));
/*---------------- 测试服务器 ----------------*/
// gulp.task('default', ['connectDev', 'watch']);
/*---------------- reload server ----------------*/
// gulp.task('reload-dev',['uglify','minifyCss','images'],function() {
// gulp.src(path.src + '**/*.*')
// .pipe(connect.reload());
// });
//server
gulp.task('server',function(){
browserSync.init({
port:8087,
server:{
baseDir:"./src"
}
})
})
/*--------------监听--------------------*/
gulp.task('watch',function(){
gulp.watch('src/css/*.css',['minifyCss']) //（监听文件的路径，[监听的任务名称]）
gulp.watch('src/js/*.js',['uglify'])
gulp.watch('src/html/**/*',['html'])
gulp.watch('src/*.html',['html1'])
gulp.watch('src/images/**/*.*',['images'])
gulp.watch('src/js/public/**/*',['copy'])
})
/*--------------默认命令--------------------*/
gulp.task('run',function(){
gulp.start('html','html1','minifyCss','uglify','copy','images','watch','run','server')
})
安装插件的一些注意事项
1.注意安装js格式检查：只安装 gulp-jshint会报错，还需要安装：npm install jshint --save-dev。
2.使用gulp-ruby-sass时，用sass不是gulp.src来编译Sass文件。
gulp-sass:依赖于node-sass这个库,node-sass是对libsass的Node绑定
*两者不同*
gulp-ruby-sass是调用sass，所以需要ruby环境，需要生成临时目录和临时文件
gulp-sass是调用node-sass,有node.js环境就够了，编译过程不需要临时目录和文件，直接通过buffer内容转换。
爱学习的孩子运气不会差哦~
关注小白前端，持续收到文章推送！