Gulp实例（包括环境搭建的自动检测）

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