gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;
她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;
使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
1.gulp-clean
删除文件/文件夹
npm install gulp-clean --save-dev
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('clean',function(){
return gulp.src('./public/dist',{read:false}).pipe(clean());
});
2.gulp-concat
合并js文件,可以合并多个js文件为一个文件,减少服务器请求。
npm install gulp-concat --save-dev
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/'));
});
3.gulp-uglify
对js文件进行压缩,有人叫这个作“丑化”,确实挺丑的
npm install gulp-uglify --save-dev
var uglify = require('gulp-uglify');
gulp.task('uglify ',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});
4.css合并插件gulp-concat-css
css合并插件,合并多个css文件为一个文件,减少网页对服务器的请求数,提供网页响应速度。
npm install gulp-concat-css --save-dev
var concatCss = require('gulp-concat-css');
gulp.task('concatCss ', function () {
return gulp.src('src/**/*.css')
.pipe(concatCss("index.css"))
.pipe(gulp.dest('dist/'));
});
5.css压缩插件 gulp-minify-css
压缩css文件
npm install gulp-minify-css --save-dev
var minifyCSS = require('gulp-minify-css');
gulp.task('minifyCSS ', function() {
return gulp.src('src/css/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('dist/'));
});
6.gulp-autoprefixer
增加浏览器的私有前缀,让你不用再考虑为了写浏览器的兼容前缀而头疼。
npm install gulp-autoprefixer --save-dev
var autoprefixer= require('gulp-autoprefixer');
gulp.task('autoprefixer', function () {
gulp.src('src/css/*.css')
.pipe(autoprefixer({
cascade: true,
remove:true
}))
.pipe(gulp.dest('dist/css'));
});
7.gulp-htmlmin
html文件压缩插件
npm install gulp-htmlmin --save-dev
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', function() {
gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist/'));
});
8. gulp-imagemin
图片压缩插件。
npm install gulp-imagemin–save-dev
var imagemin = require('gulp-imagemin');
gulp.task('imagemin', function(){
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
9.gulp-rename
修改文件的名字。
npm install gulp-rename --save-dev
var rename = require('rename');
gulp.task('rename', function(){
gulp.src('src/css/base.css')
.pipe(rename('main.css'))
.pipe(gulp.dest('src/css/'));
});
10.gulp-jshint
检查javascript代码中的错误
npm install gulp-jshint --save-dev
var jshint = require('gulp-jshint');
gulp.task('jshint',function(){
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter());
});
11.gulp-csslint
检查css的语法错误
npm install gulp-csslint --save-dev
var csslint = require('gulp-csslint');
gulp.task('csslint', function() {
gulp.src('src/css/*.css')
.pipe(csslint())
.pipe(csslint.reporter());
});
12.gulp-csscomb
格式化css代码,美化css代码,更容易阅读。
npm install gulp-csscomb --save-dev
var csscomb = require('gulp-csscomb');
gulp.task('csscomb', function() {
gulp.src('src/css/main.css')
.pipe(csscomb())
.pipe(gulp.dest('dist/css'));
});
13.gulp-rev-collector
HTML PHP JSON 路径替换
npm install gulp-rev-collector --save-dev
var revCollector = require('gulp-rev-collector');
gulp.task('revCollector ', function() {
gulp.src(['./public/dist/rev/*.json', './resources/views/web/**/*.php'])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest('./resources/views/web/'));
});
14.gulp-rev
给文件后添加md5时间戳
npm install gulp-rev --save-dev
var rev = require('gulp-rev');
gulp.task('rev',function(){
gulp.src(['./public/js/*.js','./public/js/common/*.js'])
.pipe(jshint())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('./public/dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('./public/dist/dev'))
});