glup簡單應用---gulpfile.js

//npm install gulp -g (global環境)
//npm install gulp --save-dev (項目環境)
//在項目中install須要的gulp插件,通常只壓縮的話須要
//npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
//如下require須要的module
var gulp = require('gulp'),
	minifycss = require('gulp-minify-css'),
	minifyhtml = require('gulp-minify-html'),
	concat = require('gulp-concat'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename'),
	del = require('del');
//壓縮JS
gulp.task('minify', function() {
	gulp.src('./src/js/*.js')
		.pipe(concat('main.js')) //合併全部js到main.js
		.pipe(rename({
			suffix: '.min'
		})) //rename壓縮後的文件名 讓main.js變成main.min.js
		.pipe(uglify()) //執行壓縮
		.pipe(gulp.dest('./build/js'))
});
//壓縮CSS
gulp.task('minifycss', function() {
	return gulp.src('./src/css/*.css') //壓縮的文件
		.pipe(minifycss())
		.pipe(gulp.dest('./build/css')); //輸出文件夾
});
//壓縮HTML
gulp.task('minifyhtml', function() {
	gulp.src('./src/html/*.html') // 要壓縮的html文件
		.pipe(minifyhtml()) //壓縮
		.pipe(gulp.dest('./build/html'));
});
//執行壓縮前,先刪除文件夾裏的內容
//執行刪除的時候不要把目錄定在build的子目錄中,windows刪除目錄的同時會報錯
gulp.task('clean', function(cb) {
	del(['build/css', 'build/js'], cb)
});
//在任務數組中放上面要執行的任務
gulp.task('default', ['clean', 'minify', 'minifycss', 'minifyhtml']);
相關文章
相關標籤/搜索