目录
前言
上回写了一篇关于《一份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"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
其中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/**/*',
dist: DIST_DIR + 'assets'
},
css: {
src: SRC_DIR + 'css/**/*.css',
dist: DIST_DIR + 'css'
},
sass: {
src: SRC_DIR + 'sass/**/*.scss',
dist: DIST_DIR + 'css'
},
js: {
src: SRC_DIR + 'js/**/*.js',
dist: DIST_DIR + 'js',
build_name: 'build.js'
},
img: {
src: SRC_DIR + 'images/**/*',
dist: DIST_DIR + 'images'
}
};
module.exports = Config;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
创建gulp的dev文件
在build文件夹下创建gulpfile.dev.js文件,该文件放置的时开发环境下调用的任务,同时使用browser-sync实现编写程序的时候浏览器自动刷新的功能。
gulpfile.dev.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
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');
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
});
gulp.watch(Config.html.src, ['html:dev']);
gulp.watch(Config.css.src, ['css:dev']);
gulp.watch(Config.sass.src, ['sass:dev']);
gulp.watch(Config.assets.src, ['assets:dev']);
gulp.watch(Config.js.src, ['js:dev']);
gulp.watch(Config.img.src, ['images:dev']);
});
}
module.exports = dev;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
在该文件中创建了如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');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var Config = require('./gulpfile.config.js');
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'
}))
.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;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
同样在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
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
(完)