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-less
var 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-autoprefixer
var 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-cssmin
var 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-rename
var 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-rename
var 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-concat
var 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-concat
var 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-html
var 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-autoprefixer
var 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')); //文件输出路径
});
网友评论