写一份gulp常用配置文件,构建前端工作流
2017-01-09 21:31
513 查看
目录
目录前言
创建项目
初始化项目
创建目录结构
编写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
相关文章推荐
- gulp-写一份gulp常用配置文件,构建前端工作流
- gulp前端自动化构建工具(三):gulp工具配置文件
- 前端构建工具之gulp的安装和配置
- 前端构建之gulp与常用插件
- 前端构建工具- gulp - 安装及简单CSS,JS文件合并压缩
- 前端构建之gulp与常用插件
- 前端构建工具之gulp的配置与搭建详解
- 前端构建系统 Gulp 的使用与常用插件推荐 - 上篇
- gulpfile.js常用配置文件
- 前端构建系统 Gulp 的使用与常用插件推荐 - 上篇
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端构建工具gulp超详细配置, 使用教程(图文)
- 前端构建工具之gulp_常用插件
- 自动化构建工具Gulp配置文件gulpfile.js
- 官网常用 gulp配置文件
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 一份简单的gulpfile 配置文件
- 前端构建之gulp与常用插件