第 4 章 gulpjs-阿里云开发者社区

第 4 章 gulpjs

2018-01-10 1233

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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 系列手札
本文作者：陈景峯
转载请与作者联系，同时请务必标明文章原始出处和作者信息及本声明。