写一份gulp常用配置文件，构建前端工作流
目录
- 目录
- 前言
- 创建项目
- 初始化项目
- 创建目录结构
- 编写Gulp配置
- 创建gulp的config文件
- 创建gulp的dev文件
- 创建gulp的prod文件
- 调用dev和prod方法
- 运行gulp
- 定义脚本scripts
- 附录
- 自动创建基础目录结构
- 初始目录和文件
- 安装mkdirp插件
- 补充配置创建初始化任务
- 调用init任务
- 执行初始化
前言
上回写了一篇关于《一份gulp的配置文件》的文章。其中已经提及了简单项目中gulp的配置。
在使用实践的过程中，发现这样的一份配置并不太“友好”，没有区分开发环境和生产环境。在实际中，开发过程中并不需要把所有东西都做到面面俱到，如：必须压缩CSS、JS文件等操作。我们可以在真正发布到生产环境的时候再进行这样的操作。在这里，读者可以先参考《入门：十分钟自动化构建——jack_lo》一文。
创建项目
初始化项目
进入到项目目录，使用如下命令初始化项目：
npm init当然，也可以直接创建一个package.json文件，内容如下：
{
"name": "Gulp-Workflow",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp dev",
"dev": "gulp dev",
"clean": "rimraf dist",
"build": "rimraf dist && gulp build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.6",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4"
}
} 其中scripts中定义的是当前项目下的一些npm脚本操作，后续将要提及。而devDependencies则显然是该项目所需的依赖。
通过如下命令下载依赖：
npm install创建目录结构
我们在项目中创建一个src目录，作为项目的源。而创建dist目录作为源文件打包后存放的位置，创建build目录放置gulp的另外一些配置文件。如下：
- project
|- build
|- dist // 打包文件夹
|- src // 源文件夹
| |- assets // 放置一些第三方文件，如bootstrap
| |- css
| | `- index.css
| |- images
| |- js
| | `- index.js
| |- sass
| | `- index.scss
|- gulpfile.js
`- package.json编写Gulp配置
创建gulp的config文件
我们在build文件夹中可以创建一个 gulpfile.config.js 文件，主要用途为保存项目的目录配置，如源文件存放的路径，打包后文件存放的路径等，可以进行灵活配置。同时将Config对应暴露出来供其他文件引用。
gulpfile.config.js
var SRC_DIR = './src/'; // 源文件目录
var DIST_DIR = './dist/'; // 文件处理后存放的目录
var DIST_FILES = DIST_DIR + '**'; // 目标路径下的所有文件
var Config = {
src: SRC_DIR,
dist: DIST_DIR,
dist_files: DIST_FILES,
html: {
src: SRC_DIR + '*.html',
dist: DIST_DIR
},
assets: {
src: SRC_DIR + 'assets/**/*', // assets目录：./src/assets
dist: DIST_DIR + 'assets' // assets文件build后存放的目录：./dist/assets
},
css: {
src: SRC_DIR + 'css/**/*.css', // CSS目录：./src/css/
dist: DIST_DIR + 'css' // CSS文件build后存放的目录：./dist/css
},
sass: {
src: SRC_DIR + 'sass/**/*.scss', // SASS目录：./src/sass/
dist: DIST_DIR + 'css' // SASS文件生成CSS后存放的目录：./dist/css
},
js: {
src: SRC_DIR + 'js/**/*.js', // JS目录：./src/js/
dist: DIST_DIR + 'js', // JS文件build后存放的目录：./dist/js
build_name: 'build.js' // 合并后的js的文件名
},
img: {
src: SRC_DIR + 'images/**/*', // images目录：./src/images/
dist: DIST_DIR + 'images' // images文件build后存放的目录：./dist/images
}
};
module.exports = Config;创建gulp的dev文件
在build文件夹下创建gulpfile.dev.js文件，该文件放置的时开发环境下调用的任务，同时使用browser-sync实现编写程序的时候浏览器自动刷新的功能。
gulpfile.dev.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer'); // 处理css中浏览器兼容的前缀
var rename = require('gulp-rename'); //重命名
var cssnano = require('gulp-cssnano'); // css的层级压缩合并
var sass = require('gulp-sass'); //sass
var jshint = require('gulp-jshint'); //js检查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1）
var uglify = require('gulp-uglify'); //js压缩
var concat = require('gulp-concat'); //合并文件
var imagemin = require('gulp-imagemin'); //图片压缩
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var Config = require('./gulpfile.config.js');
//======= gulp dev 开发环境下 ===============
function dev() {
/**
* HTML处理
*/
gulp.task('html:dev', function () {
return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist)).pipe(reload({
stream: true
}));
});
/**
* assets文件夹下的所有文件处理
*/
gulp.task('assets:dev', function () {
return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist)).pipe(reload({
stream: true
}));
});
/**
* CSS样式处理
*/
gulp.task('css:dev', function () {
return gulp.src(Config.css.src).pipe(gulp.dest(Config.css.dist)).pipe(reload({
stream: true
}));
});
/**
* SASS样式处理
*/
gulp.task('sass:dev', function () {
return gulp.src(Config.sass.src).pipe(sass()).pipe(gulp.dest(Config.sass.dist)).pipe(reload({
stream: true
}));
});
/**
* js处理
*/
gulp.task('js:dev', function () {
return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(gulp.dest(Config.js.dist)).pipe(reload({
stream: true
}));
});
/**
* 图片处理
*/
gulp.task('images:dev', function () {
return gulp.src(Config.img.src).pipe(imagemin({
optimizationLevel: 3
, progressive: true
, interlaced: true
})).pipe(gulp.dest(Config.img.dist)).pipe(reload({
stream: true
}));
});
gulp.task('dev', ['html:dev', 'css:dev', 'sass:dev', 'js:dev', 'assets:dev', 'images:dev'], function () {
browserSync.init({
server: {
baseDir: Config.dist
}
, notify: false
});
// Watch .html files
gulp.watch(Config.html.src, ['html:dev']);
// Watch .css files
gulp.watch(Config.css.src, ['css:dev']);
// Watch .scss files
gulp.watch(Config.sass.src, ['sass:dev']);
// Watch assets files
gulp.watch(Config.assets.src, ['assets:dev']);
// Watch .js files
gulp.watch(Config.js.src, ['js:dev']);
// Watch image files
gulp.watch(Config.img.src, ['images:dev']);
});
}
//======= gulp dev 开发环境下 ===============
module.exports = dev; 在该文件中创建了如html:dev、css:dev、sass:dev等几个任务（具体任务实现了什么功能，聪明的你应该看得出来~），这几个任务被放置在dev函数中，并且将dev函数暴露出去。至于为啥这么做嘛，后面会知道的。
其中一个主要的gulp任务 dev（同时也是生产环境下没有的gulp任务），开启了一个browserSync服务器，同时监听各个资源文件的变化，当文件发生变化后通知浏览器进行重新刷新。
使用gulp dev命令就可以进入开发模式咯~~（当然现在还不行，你骗我呢。因为dev方法还未被调用。）
创建gulp的prod文件
在build文件夹下创建gulpfile.prod.js文件，用于放置生产环境下运行的任务。其中在生产环境下，我们并不需要使用到什么浏览器自动刷新的功能，只要进行如压缩CSS、JS文件等操作即可。
gulpfile.prod.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer'); // 处理css中浏览器兼容的前缀
var rename = require('gulp-rename'); //重命名
var cssnano = require('gulp-cssnano'); // css的层级压缩合并
var sass = require('gulp-sass'); //sass
var jshint = require('gulp-jshint'); //js检查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1）
var uglify = require('gulp-uglify'); //js压缩
var concat = require('gulp-concat'); //合并文件
var imagemin = require('gulp-imagemin'); //图片压缩
var Config = require('./gulpfile.config.js');
//======= gulp build 打包资源 ===============
function prod() {
/**
* HTML处理
*/
gulp.task('html', function () {
return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist));
});
/**
* assets文件夹下的所有文件处理
*/
gulp.task('assets', function () {
return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist));
});
/**
* CSS样式处理
*/
gulp.task('css', function () {
return gulp.src(Config.css.src).pipe(autoprefixer('last 2 version')).pipe(gulp.dest(Config.css.dist)).pipe(rename({
suffix: '.min'
})).pipe(cssnano()) //执行压缩
.pipe(gulp.dest(Config.css.dist));
});
/**
* SASS样式处理
*/
gulp.task('sass', function () {
return gulp.src(Config.sass.src).pipe(autoprefixer('last 2 version')).pipe(sass()).pipe(gulp.dest(Config.sass.dist)).pipe(rename({
suffix: '.min'
})) //rename压缩后的文件名
.pipe(cssnano()) //执行压缩
.pipe(gulp.dest(Config.sass.dist));
});
/**
* js处理
*/
gulp.task('js', function () {
return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(gulp.dest(Config.js.dist)).pipe(rename({
suffix: '.min'
})).pipe(uglify()).pipe(gulp.dest(Config.js.dist));
});
/**
* 合并所有js文件并做压缩处理
*/
gulp.task('js-concat', function () {
return gulp.src(Config.js.src).pipe(jshint('.jshintrc')).pipe(jshint.reporter('default')).pipe(concat(Config.js.build_name)).pipe(gulp.dest(Config.js.dist)).pipe(rename({
suffix: '.min'
})).pipe(uglify()).pipe(gulp.dest(Config.js.dist));
});
/**
* 图片处理
*/
gulp.task('images', function () {
return gulp.src(Config.img.src).pipe(imagemin({
optimizationLevel: 3
, progressive: true
, interlaced: true
})).pipe(gulp.dest(Config.img.dist));
});
gulp.task('build', ['html', 'css', 'sass', 'js', 'assets', 'images']);
}
module.exports = prod; 同样在gulpfile.prod.js文件中将所有的任务放置在了prod函数中，同时暴露该函数供外部调用。
使用gulp build命令就可以实现资源的打包咯~~（当然现在还不行，你又骗我呢。因为prod方法还未被调用。）
调用dev和prod方法
在真正的gulp配置文件gulpfile.js中，引入gulpfile.dev.js和gulpfile.prod.js文件，并调用dev和prod方法，这样对应环境下的各个任务即被创建出来了。
gulpfile.js
/**
* Created by DreamBoy on 2017/1/8.
*/
var prod = require('./build/gulpfile.prod.js');
var dev = require('./build/gulpfile.dev.js');
prod();
dev();运行gulp
这个时候，我们可以使用gulp dev命令进行开发模式，此时会监听项目src中文件的变化，执行对应的任务，与此同时会通知浏览器进行刷新，及时响应。
而使用gulp build命令则可以针对生产环境的要求打包资源文件，用于生产。
定义脚本scripts
注意到，我们在gulp build命令之前并没有执行什么删除原来dist目录的文件的操作，这样实在不太好呀。（如果没有先进行删除操作的话，可能在开发环境下生成了许多不需要的文件，此时进行打包仍会保留到这些文件。）并且有些时候，我们需要有一个clean的能力——清除所有打包后的文件。
这还不简单，直接到dist目录下，手动把所有文件都删除就行啦。呃，这种方式给旁边的妹纸看到会觉得很low嘞。
那我们换种炫酷一点的方式。注意到之前package.json文件中的scripts吗？在这里就是定义脚本的地方。如：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp dev",
"dev": "gulp dev",
"clean": "rimraf dist",
"build": "rimraf dist && gulp build"
} 其中，主要的有：
1. 定义了start脚本，用于执行gulp dev命令；
2. 定义了dev脚本，同样用于执行gulp dev命令；
3. 定义了clean脚本，用于执行rimraf dist命令（删除dist目录下的所有文件）；
4. 定义了build脚本，用于执行rimraf dist命令，还有gulp build命令，实际上就是先删除dist目录下的所有文件，然后再打包生成各资源文件。
需要rimraf，我们必须先进行全局安装：
npm install rimraf -g 这样我们在实际装逼使用过程中：
1. 使用npm start命令将对应执行gulp dev命令；
2. 使用npm run dev命令将对应执行gulp dev命令；
3. 使用npm run clean命令将删除所有生成后的文件；
4. 使用npm run build命令可以先删除生成后的文件，再重新打包生成。
附录
另外在gulp中创建了一个js和js:dev任务，其中使用jshint对js进行了校验，需要在项目根目录下创建 .jshintrc文件，文件内容如下：
{
"es5": true,
"node": true,
"bitwise": false,
"camelcase": false,
"curly": false,
"eqeqeq": false,
"forin": true,
"strict": false,
"freeze": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"noempty": false,
"nonbsp": true,
"nonew": true,
"plusplus": false,
"undef": true,
"trailing": true,
"debug": false,
"funcscope": true,
"laxcomma": false,
"loopfunc": true,
"onevar": false,
"unused": true
}自动创建基础目录结构
（2017-10-10 应博友问题，补充初始化项目目录结构的实现）
初始目录和文件
- project
|- build
| |- gulpfile.config.js
| |- gulpfile.dev.js
| |- gulpfile.init.js
| |- gulpfile.prod.js
|- gulpfile.js
`- package.json安装mkdirp插件
使用mkdirp插件来创建目录，先该插件：
cnpm install mkdirp --save-dev安装成功后，package.json 如下：
{
"name": "Gulp-Workflow",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp dev",
"dev": "gulp dev",
"clean": "rimraf dist",
"build": "rimraf dist && gulp build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.6",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.0.0",
"gulp-uglify": "^2.0.0",
"jshint": "^2.9.4",
"mkdirp": "^0.5.1"
}
}补充配置，创建初始化任务
修改gulp.config.js文件中的配置，添加dir属性 ，用来声明不同文件所在目录的路径。如下：
var SRC_DIR = './src/'; // 源文件目录
var DIST_DIR = './dist/'; // 文件处理后存放的目录
var DIST_FILES = DIST_DIR + '**'; // 目标路径下的所有文件
var Config = {
src: SRC_DIR,
dist: DIST_DIR,
dist_files: DIST_FILES,
html: {
dir: SRC_DIR,
src: SRC_DIR + '*.html',
dist: DIST_DIR
},
assets: {
dir: SRC_DIR + 'assets',
src: SRC_DIR + 'assets/**/*', // assets目录：./src/assets
dist: DIST_DIR + 'assets' // assets文件build后存放的目录：./dist/assets
},
css: {
dir: SRC_DIR + 'css',
src: SRC_DIR + 'css/**/*.css', // CSS目录：./src/css/
dist: DIST_DIR + 'css' // CSS文件build后存放的目录：./dist/css
},
sass: {
dir: SRC_DIR + 'sass',
src: SRC_DIR + 'sass/**/*.scss', // SASS目录：./src/sass/
dist: DIST_DIR + 'css' // SASS文件生成CSS后存放的目录：./dist/css
},
js: {
dir: SRC_DIR + 'js',
src: SRC_DIR + 'js/**/*.js', // JS目录：./src/js/
dist: DIST_DIR + 'js', // JS文件build后存放的目录：./dist/js
build_name: 'build.js' // 合并后的js的文件名
},
img: {
dir: SRC_DIR + 'images',
src: SRC_DIR + 'images/**/*', // images目录：./src/images/
dist: DIST_DIR + 'images' // images文件build后存放的目录：./dist/images
}
};
module.exports = Config; 在前面的初始化目录和文件中，我们可以发现，多了一个文件gulpfile.init.js，用来定义init任务。
gulpfile.init.js，如下：
var gulp = require('gulp');
var mkdirp = require('mkdirp');
var Config = require('./gulpfile.config.js');
//======= gulp init 初始化项目结构 ===============
function init() {
/**
* 初始化项目结构
*/
gulp.task('init', function () {
var dirs = [Config.html.dir, Config.assets.dir, Config.css.dir, Config.sass.dir, Config.js.dir, Config.img.dir];
dirs.forEach(dir => {
mkdirp.sync(dir);
});
});
}
module.exports = init;调用init任务
修改gulpfile.js文件，调用init任务，如下：
/**
* Created by DreamBoy on 2017/1/8.
*/
var init = require('./build/gulpfile.init.js');
var prod = require('./build/gulpfile.prod.js');
var dev = require('./build/gulpfile.dev.js');
init();
prod();
dev();执行初始化
执行如下命令后，我们可以发现项目下自动创建了对应src目录结构。
gulp init