gulp中文API
gulp 技巧集
如何在Gulp中提高Browserify的打包速度
gulp.src()
js/app.js:指定确切的文件名。
js/*.js:某个目录所有后缀名为js的文件。
js/*/.js:某个目录及其所有子目录中的所有后缀名为js的文件。
!js/app.js:除了js/app.js以外的所有文件。
gulp.dest(path[,options])
gulp.dest()
传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名,所以生成的文件名是由导入到它的文件流决定的,即使我们给它传入一个带有文件名的路径参数,然后它也会把这个文件名当做是目录名,例如:
var gulp = require('gulp');
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js
gulp.dest(path)
生成的文件路径是我们传入的path
参数后面再加上gulp.src()
中有通配符开始出现的那部分路径。例如:
gulp.src('script/avalon/avalon.js') //没有通配符出现的情况
.pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js
//有通配符开始出现的那部分路径为 **/underscore.js
gulp.src('script/**/underscore.js')
//假设匹配到的文件为script/util/underscore.js
.pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js
gulp.src('script/*') //有通配符出现的那部分路径为 *
//假设匹配到的文件为script/zepto.js
.pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js
通过指定gulp.src()
方法配置参数中的base
属性,我们可以更灵活的来改变gulp.dest()
生成的文件路径。
当我们没有在gulp.src()
方法中配置base
属性时,base
的默认值为通配符开始出现之前那部分路径,例如:
gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src
//设该模式匹配到了文件 app/src/css/normal.css
.pipe(gulp.dest('dist')) //用dist替换掉base路径,最终得到 dist/css/normal.css
所以改变base
路径后,gulp.dest()
生成的文件路径也会改变
gulp.src(script/lib/*.js) //没有配置base参数,此时默认的base路径为script/lib
//假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js
gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数,此时base路径为script
//假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js
gulp简易入坑
gulp-rename
var rename = require("gulp-rename");
// rename via string
gulp.src("./src/main/text/hello.txt")
.pipe(rename("main/text/ciao/goodbye.md"))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md
// rename via function
gulp.src("./src/**/hello.txt")
.pipe(rename(function (path) {
path.dirname += "/ciao";
path.basename += "-goodbye";
path.extname = ".md";
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md
// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
.pipe(rename({
dirname: "main/text/ciao",
basename: "aloha",
prefix: "bonjour-",
suffix: "-hola",
extname: ".md"
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md
gulp-concat
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
gulp-clean-css
var gulp = require('gulp'),
cssmin = require('gulp-clean-css');
gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssmin({
advanced: false, //类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
compatibility:'ie7', // 保留ie7及以下兼容写法 类型:String 默认:'or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式, '*':IE9+兼容模式]
keepBreaks: true, //类型:Boolean 默认:false [是否保留换行]
keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('dist/css'));
});
gulp-rev
const gulp = require('gulp');
const rev = require('gulp-rev');
gulp.task('default', () =>
// by default, gulp would pick `assets/css` as the base,
// so we need to set it explicitly:
gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
.pipe(gulp.dest('build/assets')) // copy original assets to build dir
.pipe(rev())
.pipe(gulp.dest('build/assets')) // write rev'd assets to build dir
.pipe(rev.manifest())
.pipe(gulp.dest('build/assets')) // write manifest to build dir
);
基于 Gulp 的简易前端自动化工程搭建
gulp-base64
var gulp = require('gulp');
var base64 = require('./build/gulp-base64');
//basic example
gulp.task('build', function () {
return gulp.src('./css/*.css')
.pipe(base64())
.pipe(concat('main.css'))
.pipe(gulp.dest('./public/css'));
});
...
//example with options
gulp.task('build', function () {
return gulp.src('./css/*.css')
.pipe(base64({
baseDir: 'public',
extensions: ['svg', 'png', /\.jpg#datauri$/i],
exclude: [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
maxImageSize: 8*1024, // bytes,
deleteAfterEncoding: false,
debug: true
}))
.pipe(concat('main.css'))
.pipe(gulp.dest('./public/css'));
});