分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
目录
前言
上回写了一篇关于《一份gulp的配置文件》的文章。其中已经提及了简单项目中gulp的配置。
在使用实践的过程中，发现这样的一份配置并不太“友好”，没有区分开发环境和生产环境。在实际中，开发过程中并不需要把所有东西都做到面面俱到，如：必须压缩CSS、JS文件等操作。我们可以在真正发布到生产环境的时候再进行这样的操作。在这里，读者可以先参考《入门：十分钟自动化构建——jack_lo》一文。
创建项目
初始化项目
进入到项目目录，使用如下命令初始化项目：
npm init- 1
当然，也可以直接创建一个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
其中scripts中定义的是当前项目下的一些npm脚本操作，后续将要提及。而devDependencies则显然是该项目所需的依赖。
通过如下命令下载依赖：
npm install- 1
创建目录结构
我们在项目中创建一个src目录，作为项目的源。而创建dist目录作为源文件打包后存放的位置，创建build目录放置gulp的另外一些配置文件。如下：
- project |- build |- dist // 打包文件夹 |- src // 源文件夹 | |- assets // 放置一些第三方文件，如bootstrap | |- css | | `- index.css | |- images | |- js | | `- index.js | |- sass | | `- index.scss |- gulpfile.js `- package.json- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
编写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;- 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'); // 处理css中浏览器兼容的前缀 var rename = require('gulp-rename'); //重命名 var cssnano = require('gulp-cssnano'); // css的层级压缩合并var sass = require('gulp-sass'); //sassvar 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;- 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'); // 处理css中浏览器兼容的前缀 var rename = require('gulp-rename'); //重命名 var cssnano = require('gulp-cssnano'); // css的层级压缩合并var sass = require('gulp-sass'); //sassvar 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;- 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();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
运行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
- 2
- 3
- 4
- 5
- 6
- 7
其中，主要的有：
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
这样我们在实际使用过程中：
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
自动创建基础目录结构
（2017-10-10 应博友问题，补充初始化项目目录结构的实现）
初始目录和文件
- project |- build | |- gulpfile.config.js | |- gulpfile.dev.js | |- gulpfile.init.js | |- gulpfile.prod.js |- gulpfile.js `- package.json- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
安装mkdirp插件
使用mkdirp插件来创建目录，先该插件：
cnpm install mkdirp --save-dev- 1
安装成功后，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" }}- 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
补充配置，创建初始化任务
修改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;- 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
在前面的初始化目录和文件中，我们可以发现，多了一个文件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;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
调用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();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
执行初始化
执行如下命令后，我们可以发现项目下自动创建了对应src目录结构。
gulp init- 1