Gulp實例（包括環境搭建的自動檢測）

Gulp是一個自動化構建工具，開發者能夠使用它在項目開發過程當中自動執行常見任務。下面我將完成以下的功能點而且附上源碼：

• CSS文件打包
• less文件打包
• sass文件打包
• JavaScript文件打包
• 圖片文件打包

具體的實例請點擊一下連接前往 github 進行下載：

Gulp GitHub demo實例下載

1. 建立 package.json 文件（使用 cnpm init 命令行）

生成的package.json代碼以下所示： 注意：我將entry point 改成gulpfile.js

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
複製代碼

2. 建立 .babelrc 文件（因爲gulp在編譯ES6語法會報錯，因此須要將Es6de語法編譯爲ES5）

建立的 .babelrc 代碼以下所示

{
  "presets": [
    "es2015"
  ]
}
複製代碼

3. 建立gulpfile.js文件

建立的gulpfile.js文件代碼以下：

• 其中dist文件夾下面包括的內容爲使用gulp自動化構建工具打包後的文件存放目錄，src文件夾爲源代碼文件存放地點。

//引入組件
//cnpm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

//用於支持ES6的語法
//cnpm install babel-core babel-preset-es2015 --save-dev

var gulp = require('gulp'),
	imagemin = require('gulp-imagemin'), //圖片壓縮
	sass = require('gulp-sass'),          //sass
	minifycss = require('gulp-minify-css'), //css壓縮
    less=require('gulp-less'),
//	jshint = require('gulp-jshint'),           //js檢查
	babel = require('gulp-babel'),
	uglify = require('gulp-uglify'), //js壓縮
	rename = require('gulp-rename'), //重命名
	concat = require('gulp-concat'), //合併文件
	clean = require('gulp-clean'); //清空文件夾
htmlmin = require('gulp-htmlmin'); //html 處理

//css 壓縮
gulp.task('minifycss', function() {
	var cssSrc = './src/css/*.css',
		cssDst = './dist/css';
	return gulp.src(cssSrc) //被壓縮的文件
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(minifycss()) //執行壓縮
		.pipe(gulp.dest(cssDst)); //輸出文件夾
});

//less壓縮
gulp.task('testLess',function(){
    var cssSrc = './src/less/*.less',
        cssDst = './dist/css';
    return gulp.src(cssSrc) //被壓縮的文件
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(less()) //執行壓縮
        .pipe(gulp.dest(cssDst)); //輸出文件夾
});

gulp.task('testSass',function(){
    var cssSrc = './src/sass/*.sass',
        cssDst = './dist/css';
    return gulp.src(cssSrc) //被壓縮的文件
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sass()) //執行壓縮
        .pipe(gulp.dest(cssDst)); //輸出文件夾
});


// 圖片處理
gulp.task('imagemin', function() {
	var imgSrc = './src/images/*',
		imgDst = './dist/images';
	return gulp.src(imgSrc)
		.pipe(imagemin())
		.pipe(gulp.dest(imgDst));
});
// js處理
gulp.task('uglify', function() {
	var jsSrc = './src/js/*.js',
		jsDst = './dist/js';
	return gulp.src(jsSrc)
		.pipe(rename({
			suffix: '.min'
		}))
        .pipe(babel({
            presets: ['es2015']
        }))
		.pipe(uglify())
		.pipe(gulp.dest(jsDst));
});
//html 處理
gulp.task('htmlmin', function() {
	var options = {
		removeComments: true, //清除HTML註釋
		collapseWhitespace: true, //壓縮HTML
		collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
		removeEmptyAttributes: true, //刪除全部空格做屬性值 <input id="" /> ==> <input />
		removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
		removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
		minifyJS: true, //壓縮頁面JS
		minifyCSS: true //壓縮頁面CSS
	};
	var htmlSrc = './src/*.html',
		htmlDst = './dist';
	gulp.src(htmlSrc)
		.pipe(htmlmin(options))
		.pipe(gulp.dest(htmlDst)); //同名的html,會直接替換
});
// clean被執行時,先清空對應目錄下圖片、樣式、js
gulp.task('clean', function() {
	return gulp.src(['./dist/css', './dist/js', './dist/images'], {
			read: false
		})
		.pipe(clean());
});
//watch
// gulp.watch('./src/css/*.css', ['minifycss']);
gulp.task('watch', function() {
	//css
	gulp.watch('./src/css/*.css', ['minifycss']);
	//less
    gulp.watch('./src/less/*.less', ['testLess']);
    //sass
    gulp.watch('./src/sass/*.sass', ['testSass']);
	//css
	gulp.watch('./src/js/*.js', ['uglify']);
	//css
	gulp.watch('./src/images/*', ['imagemin']);
	//css
	gulp.watch('./src/*.html', ['htmlmin']);
});
// 默認預設任務 清空圖片、樣式、js並重建 運行語句 gulp
gulp.task('default', ['clean'], function() {
	gulp.start('minifycss','testLess','testSass', 'uglify', 'imagemin', 'htmlmin', 'watch');
});
複製代碼

4. 安裝依賴包

// 安裝依賴包
cnpm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

//安裝用於支持ES6的語法
cnpm install babel-core babel-preset-es2015 --save-dev 
複製代碼

項目地址

使用方法以下：

• 執行命令行 cnpm install
• 執行打包命令 gulp