目录
- 4.1. Tasks automation
-
- 4.1.1. gulp-changed
- 4.1.2. 显示处理进度
- 4.1.3. notify
- 4.1.4. del
- 4.1.5. start
- 4.2. watch
- 4.3. HTML Minification
- 4.4. CSS Minification
-
- 4.4.1. gulp-minify-css
- 4.4.2. gulp-clean-css
- 4.4.3. gulp-make-css-url-version
- 4.4.4. CSS 冗余分析
- 4.5. JS Minification
-
- 4.5.1. JS 校验
- 4.6. CSS Sprite
- 4.7. Compress Images
- 4.8. WEBP格式图片
- 4.9. Sass Compilation
- 4.10. Less Compilation
- 4.11. 重命名文件名
- 4.12. 合并文件
- 4.13. 文件头
- 4.14. yargs 命令行参数传递
-
- 4.14.1. gulp-util
- 4.14.2. minimist
- 4.15. gulp-sourcemaps
- 4.16. gulp-zip
- 4.17. 清理JS中的console.log()调试语句
- 4.18. copy-dir
- 4.19. gulp-copy
- 4.20.
- 4.21. Example
-
- 4.21.1. HTML,JS,CSS
- 4.21.2. 命令行传递参数
安装
npm install gulp-cli npm install gulp -D
创建 gulpfile.js 文件
var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');
gulp.task('html', function(){
return gulp.src('client/templates/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('default', [ 'html', 'css' ]);
排除目录
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
4.1. Tasks automation
4.1.1. gulp-changed
// npm install --save-dev gulp gulp-changed gulp-jscs gulp-uglify
var gulp = require('gulp');
var changed = require('gulp-changed');
var jscs = require('gulp-jscs');
var uglify = require('gulp-uglify');
var SRC = 'src/**/*.js';
var DEST = 'dist';
gulp.task('default', function() {
return gulp.src(SRC)
.pipe(changed(DEST)) // changed 任务需要提前知道目标目录位置才能找出哪些文件是被修改过的,只有被更改过的文件才会通过这里
.pipe(jscs())
.pipe(uglify())
.pipe(gulp.dest(DEST));
});
4.1.2. 显示处理进度
显示处理中的文件
gulp.task('minify-css', function () {
gulp.src([src + '/**/css/**/*.css', "!"+src + '/**/css/**/*.min.css'])
.on('data', function(file) {
console.log('%s Read %d bytes of data', file.path, file.contents.length);
})
.pipe(concat("finally.css"))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest( dist ));
});
4.1.3. notify
npm install --save-dev gulp-notify
var notify = require('gulp-notify');
.pipe(notify({ message: 'Styles task complete' }));
4.1.4. del
var gulp = require('gulp');
var del = require('del');
gulp.task('clean:mobile', function (cb) {
del([
'dist/**/css/*.min.css',
'dist/mobile/**/*',
'!dist/mobile/deploy.json'
], cb);
});
gulp.task('default', ['clean:mobile']);
// Clean
gulp.task('clean', function() {
return del(['dist/styles', 'dist/scripts', 'dist/images']);
});
4.1.5. start
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
原文出处：Netkiller 系列 手札
本文作者：陈景峯
转载请与作者联系，同时请务必标明文章原始出处和作者信息及本声明。
