Home | 简体中文 | 繁体中文 | 杂文 | Github | 知乎专栏 | 51CTO学院 | CSDN程序员研修院 | OSChina 博客 | 腾讯云社区 | 阿里云栖社区 | Facebook | Linkedin | Youtube | 打赏(Donations) | About
知乎专栏多维度架构

第 4 章 gulpjs

目录

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');
});