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
