一、gulp.src(globs[,options])
options
1、base
gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/` .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build'));
二、gulp.dest(path[,options])
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates'));
输出文件所在的地址
三、gulp.task(name[,deps],fn)
name:任务的名字。如果你想要在命令中运行你的某些任务,那么,请不要在名字使用空格
deps :type 【array】
一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // 做一些事 });
注意:你的任务是否在这些前置依赖的任务之前运行了? 使用一个callback,或者返回一个promise或stream
fn:该函数定义任务所要执行的一些操作。通常来说,他会是这种形式:
接受一个callback
返回一个stream
gulp.task('somename',function(){ var stream=gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream })
返回一个promise
var Q=require('q'); gulp.task('somename',function(){ var deferred=Q.defer(); setTimeout(function(){ deferred.resolve(); }) return deferred.promise })
四、gulp.watch(glob[,opts],task)或者gulp.watch(glob[,opts,cb])
glob:type【String、Array】
一个glob字符串,或者一个包含多个glob字符串的数组,用来指定具体监控那些文件的变动。
opts:type【Object】
tasks type【Array】
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
gulp.watch('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
常用的插件
一、gulp-htmlmin
var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); gulp.task('minify', function() { return gulp.src('src/*.html') .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist')); });
二、gulp-imagemin
const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); gulp.task('default', () => gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) );
三、gulp-clean-css
let gulp = require('gulp'); let cleanCSS = require('gulp-clean-css'); gulp.task('minify-css', () => { return gulp.src('styles/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist')); });
//兼容到IE8
{compatibility: 'ie8'}
callback 对css进一步分析
let gulp = require('gulp'); let cleanCSS = require('gulp-clean-css'); gulp.task('minify-css', () => { return gulp.src('styles/*.css') .pipe(cleanCSS({debug: true}, function(details) { console.log(details.name + ': ' + details.stats.originalSize); console.log(details.name + ': ' + details.stats.minifiedSize); })) .pipe(gulp.dest('dist')); });
四、gulp-uglify 专业打包js
var gulp = require('gulp'); var uglify = require('gulp-uglify'); var pump = require('pump'); gulp.task('compress', function (cb) { pump([ gulp.src('lib/*.js'), uglify(), gulp.dest('dist') ], cb ); });
五、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-autoprefixer 给 CSS 增加前缀。解决某些CSS属性不是标准属性,有各种浏览器前缀的情况,灰常有用
const gulp = require('gulp'); const autoprefixer = require('gulp-autoprefixer'); gulp.task('default', () => gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('dist')) );
七、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
项目的打包
var gulp = require('gulp'), minifycss = require('gulp-minify-css'), minifyhtml = require("gulp-minify-html"), /* jshint = require('gulp-jshint'),*/ uglify = require('gulp-uglify'), rename = require('gulp-rename'), concat = require('gulp-concat'); var rev = require('gulp-rev'); //- 对文件名加MD5后缀 var revCollector = require('gulp-rev-collector'); //- 路径替换 var ngAnnotate = require('gulp-ng-annotate'); var useref = require('gulp-useref'); var revReplace = require('gulp-rev-replace'); var clean = require('gulp-clean'); var amdOptimize = require('gulp-amd-optimizer'); var srcPath = { html: 'app1', css: 'app1/css', script: 'app1/js', image: 'app1/images' }; var destPath = { html: 'app', css: 'app/css', script: 'app/js', image: 'app/images' }; gulp.task("clean", function () { return gulp.src(['app','dist','json']) .pipe(clean()); }) // Styles任务 gulp.task('styles', function () { //编译sass return gulp.src(srcPath.css + '/*.css') //保存未压缩文件到我们指定的目录下面 // .pipe(gulp.dest(theDst)) //给文件添加.min后缀 // .pipe(rev()) // .pipe(rename({ suffix: '.min' })) //压缩样式文件 .pipe(minifycss()) //输出压缩文件到指定目录 .pipe(gulp.dest(destPath.css)) // .pipe(rev.manifest({merge: true})) //- 生成一个rev-manifest.json .pipe(gulp.dest('./json')); //- 将 rev-manifest.json 保存到 rev 目录内 }); gulp.task('minify', function () { var manifest = gulp.src("json/*.json"); return gulp.src([srcPath.script + '/**/*.js']) //注意,此处特意如此,避免顺序导致的问题 .pipe(ngAnnotate()) // .pipe(rev()) .pipe(uglify()) .pipe(gulp.dest(destPath.script)) //.pipe(rev.manifest({path: 'js-manifest.json', merge: true})) .pipe(gulp.dest('json')) }); /*gulp.task('app', function() { gulp.src(['dist/json/!*.json','app.js']) .pipe(revCollector()) .pipe(useref({ transformPath: function(filePath) { return filePath.replace('js/','dist/') } })) .pipe(gulp.dest('app/')) });*/ gulp.task('app',['minify'], function () { var manifest = gulp.src("json/*.json"); gulp.src(destPath.script + '/**/*.js') .pipe(revReplace({manifest: manifest})) .pipe(gulp.dest(destPath.script)) }); gulp.task('main',['minify'], function () { var manifest = gulp.src("json/*.json"); gulp.src(destPath.script + '/main*.js') .pipe(revReplace({manifest: manifest})) .pipe(gulp.dest(destPath.script)) }); gulp.task('html',['minify','styles'], function () { var manifest = gulp.src("json/*.json"); gulp.src(srcPath.html + '/*.html') .pipe(revReplace({manifest: manifest})) .pipe(gulp.dest(destPath.html)) }); // Default task gulp.task('default', function () { gulp.start('styles', 'minify', 'html', 'app','main' ,'watch'); }); // Watch gulp.task('watch', function () { // Watch .js files gulp.watch(srcPath.css + '/*.css', ['styles']); gulp.watch([srcPath.script + '/**/*.js', srcPath.script + '/*.js'], ['minify']); //gulp.watch(destPath.script + '/**/*.js', ['app']); gulp.watch(srcPath.html + '/*.html', ['html']); });
{ "name": "tejyh", "version": "1.0.0", "main": "gulpfile.js", "dependencies": { "gulp-cli": "^1.3.0" }, "devDependencies": { "gulp": "^3.9.1", "gulp-amd-optimizer": "^0.6.0", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.0", "gulp-imagemin": "^3.2.0", "gulp-jshint": "^2.0.4", "gulp-less": "^3.3.0", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.4", "gulp-minify-html": "^1.0.6", "gulp-ng-annotate": "^2.0.0", "gulp-rev": "^7.1.2", "gulp-rev-collector": "^1.1.1", "gulp-rev-replace": "^0.4.3", "gulp-uglify": "^1.5.3", "gulp-useref": "^3.1.2" }, "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "description": "" }