Home | 简体中文 | 繁体中文 | 杂文 | 打赏(Donations) | ITEYE 博客 | OSChina 博客 | Facebook | Linkedin | 知乎专栏 | Search | Email

第 4 章 gulpjs

目录

4.1. HTML Minification
4.2. CSS Minification
4.2.1. gulp-minify-css
4.2.2. gulp-clean-css
4.2.3. gulp-make-css-url-version
4.3. JS Minification
4.4. CSS Sprite
4.5. Compress Images
4.6. Sass Compilation
4.7. Less Compilation
4.8. 重命名文件名
4.9. 合并文件
4.10. 文件头
4.11. Tasks automation
4.11.1. notify
4.11.2. del
4.11.3. start
4.12. yargs 命令行参数传递
4.12.1. gulp-util
4.12.2. minimist
4.13. gulp-sourcemaps
4.14. gulp-zip
4.15.
4.16. Example
4.16.1. HTML,JS,CSS
4.16.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. HTML Minification

		
npm install --save-dev gulp-minify-html
		
		

gulpfile.js:

		
// including plugins
var gulp = require('gulp');
var minifyHtml = require("gulp-minify-html");
 
// task
gulp.task('minify-html', function () {
    gulp.src('./html/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('path/to/destination'));
});		
		
		

		
gulp minify-html