什么是 Gulp?
Gulp 是一个前端自动化工具, 开发者可以使用它来处理常见任务:
搭建 web 服务器
文件保存时自动重载浏览器
使用预处理器如 Sass,Less
优化资源, 比如压缩 CSS,JavaScript, 压缩图片
安装 Gulp
安装 Gulp 之前你需要先安装 Node.JS http://nodejs.cn/
安装 gulp:
- $ NPM install gulp -g // 全局安装 gulp
- $ NPM install gulp --save-dev // 作为项目的开发依赖 (devDependencies) 安装
创建 Gulp 项目
首先, 在新建项目文件夹目录下执行 NPM init 命令:
- <!-- 将创建一个 package.json 文件, 保存着这个项目相关信息和插件依赖. -->
- $ NPM init
补充项目相关信息后, 进行局部安装 Gulp
- <!-- 使用 - save-dev, 将在 package.json 中添加 gulp 依赖 -->
- <!-- 执行完之后, gulp 将创建含有 gulp 文件夹的 node_modules 文件夹 -->
- $ NPM install gulp --save-dev
在 package.JSON 自动生成如下的 JSON 内容:
- {
- "name": "gulpdemo",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1"
- },
- "author": "jw",
- "license": "ISC",
- "devDependencies": {
- "gulp": "^3.9.1",
- }
- }
Gulp 开发构建
创建通用的 webapp 目录结构, 并明确下项目的目录结构.(此例目录结构作为学习示范, 非固定)
- |-App/ <!--app 文件夹作为开发目录(所有的源文件都放在这下面)-->
- |-CSS/
- |-JS/
- |-SCSS/
- |-images/
- |-fonts/
- |-index.html
- |-dist/ <!--dist 文件夹用来存放生产环境下的内容 -->
- |-gulpfile.JS <!-- 配置 gulp 工具的搭建和使用 -->
- |-node_modules/
- |-package.JSON
在项目的 gulpfile.JS 文件中:
var gulp = require('gulp');
这行命令告知 Node 去 node_modules 中查找 gulp 包, 先局部查找, 否则在全局环境中查找, 并赋值使用 gulp 变量
牛刀小试:
- gulp.task('hello', function() {
- console.log('Hello World!');
- });
命令行中执行:$ gulp hello, 将会输出 Hello World.
使用 Sass 预处理插件
安装
$ NPM install gulp-Sass --save-dev
引入插件
- var gulp = require('gulp');
- var Sass = require('gulp-sass');
使用
- // 将对 styles.SCSS 进行预处理后生成 styles.CSS
- gulp.task('sass', function(){
- return gulp.src('app/scss/**/*.scss') // 来源
- .pipe(Sass()) // 执行 Sass()
- .pipe(gulp.dest('app/css')) // 生成
- });
补充:[常用的 4 种匹配模式] *.SCSS : * 号匹配当前目录任意文件, 所以这里 *.SCSS 匹配当前目录下所有 SCSS 文件 **/*.SCSS : 匹配当前目录及其子目录下的所有 SCSS 文件. !not-me.SCSS :! 号移除匹配的文件, 这里将移除 not-me.SCSS *.+(SCSS|Sass) :+ 号后面会跟着圆括号, 里面的元素用 | 分割, 匹配多个选项. 这里将匹配 SCSS 和 Sass 文件.
使用 Browser Sync 插件自动刷新
安装
- <!-- 这里没有 gulp - 前缀, 因为 browser-sync 支持 Gulp -->
- $ NPM install browser-sync --save-dev
引入
var browserSync = require('browser-sync');
使用
- gulp.task('browserSync', function() {
- browserSync({
- server: {
- baseDir: 'app' // 需要告知它, 根目录在哪里
- },
- })
- })
使用 watch 监听方法
Gulp 提供 watch 方法给我们, 语法如下:
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
上例中的 Sass 就可以改造成这样:
gulp.watch('app/scss/**/*.scss', ['sass']);
通常我们监听的还不只是一个文件, 把它变成一个任务:
- gulp.task('watch', function(){
- gulp.watch('app/scss/**/*.scss', ['sass']);
- // Other watchers
- })
执行 gulp watch 命令监听, 每次修改文件, Gulp 都将自动为我们执行任务. 4. 综合使用
我们稍微修改一下之前的 Sass 设置, 让每次 CSS 文件更改都刷新一下浏览器:
- gulp.task('sass', function() {
- return gulp.src('app/scss/**/*.scss')
- .pipe(Sass())
- .pipe(gulp.dest('app/css'))
- .pipe(browserSync.reload({
- stream: true // 每次修改会自动刷新浏览器
- }))
- });
使用修改监听.
- gulp.task('watch', function (){
- gulp.watch('app/scss/**/*.scss', ['sass']);
- // 当 HTML 或 JS 文件改变时, 也重新加载浏览器
- gulp.watch('app/*.html', browserSync.reload);
- gulp.watch('app/js/**/*.js', browserSync.reload);
- })
到目前为止, 我们做了下面三件事:
可运转的 Web 开发服务
使用 Sass 预处理器
自动刷新浏览器
Gulp 打包优化构建
将开发目录资源移到打包生产目录
- <!-- 以字体资源举例 -->
- gulp.task('fonts', function() {
- return gulp.src('app/fonts/**/*')
- .pipe(gulp.dest('dist/fonts'))
- })
多文件拼接成单一文件并压缩
安装
- NPM install gulp-useref --save-dev // 文件拼接插件
- NPM install gulp-uglify --save-dev //JS 压缩插件
- NPM install gulp-minify-CSS --save-dev //CSS 压缩插件
- NPM install gulp-if --save-dev // 区分处理插件
引用
- var useref = require('gulp-useref')
- var uglify = require('gulp-uglify')
- var minifyCSS = require('gulp-minify-css')
- var gulpIf = require('gulp-if')
使用
- --index.HTML--
- <!--build:css css/main.min.css -->
- <link rel="stylesheet" href="css/styles.css">
- <link rel="stylesheet" href="css/styles.1.css">
- <!-- endbuild -->
- <!--build:js js/main.min.js -->
- <script src="js/lib/a-library.js"></script>
- <script src="js/lib/b-library.js"></script>
- <script src="js/main.js"></script>
- <!-- endbuild -->
- --gulpfile.JS--
- gulp.task('useref', function(){
- return gulp.src('app/*.html')
- .pipe(useref())
- .pipe(gulpIf('*.css', minifyCSS()))
- .pipe(gulpIf('*.js', uglify()))
- .pipe(gulp.dest('dist'))
- });
图片优化(gulp-imagemin)
安装
- $ NPM install gulp-imagemin --save-dev
- $ NPM install gulp-cache --save-dev // 减少重复压缩
引入
- var imagemin = require('gulp-imagemin')
- var cache = require('gulp-cache')
使用
- gulp.task('images', function(){
- return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
- // Caching images that ran through imagemin
- .pipe(cache(imagemin({
- interlaced: true
- })))
- .pipe(gulp.dest('dist/images'))
- });
清理生成文件(del)
由于我们是自动生成文件, 我们不想旧文件掺杂进来
安装
$ NPM install del --save-dev
引入
var del = require('del')
使用
- // 情景 1: 全部清除
- gulp.task('clean', function() {
- del('dist');
- });
- // 情景 2: 不清除图片文件
- gulp.task('clean:dist', function(callback){
- del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
- });
Gulp 组合
- gulp.task('build', [`clean:dist`, `sass`, `useref`, `images`, `fonts`], function (){
- console.log('Building files');
- })
但是这样 Gulp 会同时触发 [] 里的事件. 我们要让 clean 在其他任务之前完成, 所以引入 RunSequence 插件
- $ NPM install run-sequence --save-dev // 安装
- var runSequence = require('run-sequence') // 引入
改造后开发和打包自动化构建:
- // 构建打包
- gulp.task('build', function (callback) {
- runSequence('clean:dist',
- ['sass', 'useref', 'images', 'fonts'],
- callback
- )
- })
- // 开发过程
- gulp.task('default', function (callback) {
- runSequence(['sass','browserSync', 'watch'],
- callback
- )
- })
来源: https://juejin.im/post/5bfcc1e9e51d453d776b9a87