gulp
前端自动化构建工具，可以进行文本合并，文件拷贝，js压缩，css压缩，图片压缩等。
入门
- 全局安装 gulp： $ npm install --global gulp
- 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp
- 在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default', function() {// 将你的默认的任务代码放在这
});
- 运行 gulp： $ gulp
watch和多个task任务
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('one', function() {// 将你的默认的任务代码放在这return gulp.src("./public/less/test.less").pipe(less()).pipe(gulp.dest("./public/css01/"));
});
gulp.task('two', ['one'],function() {// 将你的默认的任务代码放在这return gulp.src("./public/less/test01.less").pipe(less()).pipe(gulp.dest("./public/css01/"));
});gulp.task('default',['one','two'])//监听所有less的变化，改变时触发 one、two task任务和on change事件函数
var watcher = gulp.watch('public/less/*.less', ['one','two']);
watcher.on('change', function(event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
实例
- gulp-less 编译LESS文件
安装 npm install gulp-lessvar gulp = require('gulp'),less = require('gulp-less');gulp.task('testLess', function () {gulp.src('src/less/index.less').pipe(less()).pipe(gulp.dest('src/css'));
});
- gulp-autoprefixer 添加CSS私有前缀
安装 npm install gulp-autoprefixervar gulp = require('gulp')
var autoprefixer = require('gulp-autoprefixer');
gulp.task('test', function () {gulp.src('public/css/test01.css').pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0','last 2 Explorer versions','last 3 Safari versions'],cascade: true, //是否美化属性值 默认：true 像这样：//-webkit-transform: rotate(45deg);// transform: rotate(45deg);remove:true //是否去掉不必要的前缀 默认：true })).pipe(gulp.dest('public/css/dist/'));
});
- gulp-cssmin 压缩CSS
安装 npm install gulp-cssminvar gulp = require('gulp'),cssmin = require('gulp-cssmin');gulp.task('test', function () {gulp.src('public/css/test.css').pipe(cssmin()).pipe(gulp.dest('dist/css'));
});
- gulp-rname重命名
安装 npm install gulp-renamevar gulp = require('gulp'),rename = require('gulp-rename');gulp.task('test', function () {gulp.src('public/css/test.css').pipe(rename('index.min.css')).pipe(gulp.dest('dist/css'));
});
- gulp-imagemin 图片压缩
安装 npm install gulp-renamevar gulp = require('gulp'),imagemin = require('gulp-imagemin');gulp.task('test', function () {return gulp.src('src/images/*').pipe(imagemin()).pipe(gulp.dest('build/images'));
});
- gulp-uglify 压缩Javascript、混淆代码
安装 npm install gulp-uglify
安装 npm install gulp-concatvar gulp = require('gulp');
var concat= require("gulp-concat");
var uglify= require("gulp-uglify");gulp.task('test', function () {gulp.src('public/js/*.js').pipe(concat("min.js")) .pipe(uglify({mangle: { toplevel: true },//类型：Boolean 默认：true 是否修改变量名compress: true,//类型：Boolean 默认：true 是否完全压缩}))//压缩.pipe(gulp.dest('build/js'));
});
- gulp-concat 合并
安装 npm install gulp-concatvar gulp = require('gulp');
var concat= require("gulp-concat");gulp.task('test', function () {gulp.src('public/js/*.js')//把所有js文件合并到min.js中.pipe(concat("min.js")) .pipe(gulp.dest('build/js'));
});
- gulp-htmlmin 压缩HTML
安装 npm install gulp-minify-htmlvar gulp = require('gulp');
var minify= require("gulp-minify-html");gulp.task('test', function () {gulp.src('public/html/*.html')//要压缩的html文件.pipe(minifyHtml())//压缩.pipe(gulp.dest('build/html'));
});
- gulp-rev-append 添加版本号
index.html
<!doctype html>
<html><head><link rel="stylesheet" href="public/css/test.css?rev=@@hash"><script src="public/js/a.js?rev=@@hash"></script><script src="public/js/index.js"></script></head><body><div>hello, world!</div><img src="images/a.png?rev=@@hash" alt="" /><script src="public/js/test01.js?rev=@@hash"></script></body>
</html>安装 npm install gulp-autoprefixervar gulp = require('gulp')
var rev = require('gulp-rev-append');
gulp.task('test', function () {gulp.src('./index.html').pipe(rev()).pipe(gulp.dest('./dist/html'));
});
补充
- glup-if
- gulp-useref
- gulp.spritesmith 雪碧图
var gulp = require("gulp");
var spritesmith = require('gulp.spritesmith'); //雪碧图 gulp.task('sprite', function () { return gulp.src('src/images/*.png').pipe(spritesmith({ //需要混合的图片路径 imgName: 'sprite.png', //合并后图片的名称 cssName: 'sprite.css' //生成的CSS文件 })).pipe(gulp.dest('sprite')); //文件输出路径
});
- gulp教程