gulp 构建前端项目（一） gulp基础应用

1.gulp是基于流的压缩工具，包含了许多实用的插件。 pipe是管道的意思。处理的是文件对象，一个插件处理完后把处理后的文件流向后传递。不用像Grunt一样保存很多临时文件。所以压缩效率较高。

2.前期准备。node开发环境，安装node。会使用npm（包管理工具），编辑器我用的是Hbuilder。

3.安装gulp，插件的安装会在实际使用时介绍。

在项目根目录下，首先初始化项目 。（命令行执行以下命令）

npm init

会生成package.json文件。

全局加局部安装gulp

npm i gulp -g
npm i gulp --save-dev 

项目目录因人而异。我是直接用Hbuilder创建web项目。img，views，js, css直接在项目根目录下。没有包含在src文件加下。

4.配置文件（gulpfile.js）

在根目录下创建gulpfile.js.  引入需要的模块

const gulp= require('gulp');
const sourcePath = require('./path.config.js');  //文件路径配置文件，方便管理路径。参照5

5.目录管理，使用配置文件的形式, 基于commonJs规范。（path.config.js）

var sourcePath = {
	basePath:'dist/',
	html:{
		src:'views/*.html',
		emit:'views'
	},
	css:{
		src:'css/*.css',
		emit:'css'
	},
	js:{
		src:'js/*.js',
		emit:'js'
	},
	img:{
		src:'img/*.{png, jpg, gif, ico}',
		emit:'img'
	},
	lib:{
		src:'lib/**/*.*',
		emit:'lib'
	}
}

module.exports = sourcePath;

5.打包js,css,html。（现在只是把文件写到dist目录下，并未用插件压缩）

gulp.src('.../..')匹配需要处理的文件。生成文件对象

gulp.dest('../..')文件处理后，写入的路径

/**
 * 打包css文件
 */
gulp.task('minifyCss', function() {                        //minifyCss任务名
    return gulp.src(sourcePath.css.src)
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.css.emit))
})
/**
 * 打包js文件
 */
gulp.task('minifyJs', function() {
    return gulp.src(sourcePath.js.src)
        .pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit))
})
gulp.task('html', function() {
    return gulp.src(sourcePath.html.src)
        .pipe(gulp.dest(sourcePath.basePath + sourcePath.html.emit))
})

图片压缩使用 gulp-imagemin插件。这个插件安装需要的时间比较久。不要取消安装==。因为取消安装。然后第二次安装成功，但是压缩时一直报错。必须卸载后再重新安装才行。(命令行执行)

npm i --save-dev gulp-imagemin

使用gulp-imagemin插件

var imagemin= require('gulp-imagemin');
/**
 * 压缩img文件  TODO
 */
gulp.task('minifyImg', function() {
	return gulp.src(sourcePath.img.src)
	.pipe(imagemin({
	    optimizationLevel: 3, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
	}))
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.img.emit))
})

第三方插件可以直接创建一个任务，把文件夹复制到dist下

gulp.task('copy', function() {
    return gulp.src(sourcePath.lib.src)
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.lib.emit))
})

gulp-clean插件清除打包文件。现在并没有对打包文件重命名，或者MD5操作。所以看不出效果。

npm i --save-dev gulp-clean    //命令行运行

const clean = require('gulp-clean');
/**
 * 清空所选目录
 */
gulp.task('clean', function() {
	return gulp.src(sourcePath.basePath + "*")
	.pipe(clean())
})

所有任务都已经写好。gulp默认运行名称为default的任务。

gulp.task('default', ['clean', 'copy', 'minifyJs', 'minifyCss', 'minifyImg', 'html']);

运行 npm run dev报错。因为任务没有顺序执行，导致文件找不到等错误。需要gulp-sequence插件使任务顺序执行。

npm i --save-dev gulp-sequence //命令行执行

代码改为：

const sequence = require('gulp-sequence');
gulp.task('default', function(cb) {sequence('clean', 'copy', 'minifyJs', 'minifyCss', 'minifyImg', 'html')(cb) })

整体gulpfile.js代码如下

/**
 * author littleCoder
 * 2018-7-4
 */
var sourcePath = require("./path.config.js");
const gulp = require('gulp');
const clean = require('gulp-clean');
const sequence = require('gulp-sequence');
const imagemin = require('gulp-imagemin');

/**
 * 清空目标目录
 */
gulp.task('clean', function() {
    return gulp.src(sourcePath.basePath + "*")
	.pipe(clean())
})

/**
 * 打包js文件
 */
gulp.task('minifyJs', function() {
    return gulp.src(sourcePath.js.src)
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit))
})

/**
 * 打包css文件
 */
gulp.task('minifyCss', function() {
    return gulp.src(sourcePath.css.src)
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.css.emit))
})

/**
 * 压缩img文件  TODO
 */
gulp.task('minifyImg', function() {
    return gulp.src(sourcePath.img.src)
	.pipe(imagemin({
	    optimizationLevel: 3, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
	}))
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.img.emit))
})

gulp.task('html', function() {
    return gulp.src(sourcePath.html.src)
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.html.emit))
})

gulp.task('copy', function() {
    return gulp.src(sourcePath.lib.src)
	.pipe(gulp.dest(sourcePath.basePath + sourcePath.lib.emit))
})

gulp.task('default', function(cb) {sequence('clean', 'copy', 'minifyJs', 'minifyCss', 'minifyImg', 'html')(cb) })

初学gulp，如有不对，请指正。

gulp构建前端项目（二） 压缩文件，监听修改，浏览器同步