第 4 章 gulpjs

安装

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