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