Gulp从入门到放弃

自动化构建工具

学习目标

• 掌握gulp安装
• 掌握gulpfile文件配置
• 掌握常用插件

一、gulp简介

1.1 为什么要使用gulp？

在前端开发当中经常会有一些“重复且繁琐”的工作，比如：css或js的合并、压缩、混淆，css预处理器（sass/scss,less,stylus等）的编译，雪碧图合成处理，base64图片处理等等。

而这些工作在早先时候都是要自己一个一个的处理。当下，我们迫切需要一种工具来解决这些“繁琐”的工作，于是乎一些自动化构建工具就风雨般的降临。

在gulp之前，使用比较火爆的构建工具是grunt。

当然归根到底，之所以会出现如此玩意全都是因为一个字：懒

1.2 什么是gulp？

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

二、gulp安装

在安装之前，先大概说下gulp安装及使用大概步骤，让我们先有个初步认识。

首先当然是安装nodejs，通过nodejs的npm全局安装gulp（已安装的就不用再安装），其次在项目里安装gulp及所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。

流程： 安装Nodejs -> 全局安装gulp -> 项目安装gulp及插件 -> 配置gulpfile.js -> 运行gulp

2.1 安装nodejs

gulp是基于Nodejs实现的，所有在安装gulp前需要先安装Nodejs

打开Nodejs官网，下载与你系统所对应的版本（windows系统是.msi安装包），然后安装即可（傻瓜式操作）。

打开命令提示符（window + R 后回车），输入下列命令查看：

• node -v 查看nodejs版本
• npm -v 查看npm版本

2.2 npm（node package manager）模块管理

2.2.1 安装模块

npm install <name> [-g] [--save-dev]
// name：模块名称
// -g：全局安装
// --save：将信息保存到package.json（package.json是nodejs项目配置文件）
// -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点

2.2.2 卸载模块

npm uninstall <name> [-g] [--save-dev]
// 注意：不要直接删除node_modules下面的模块包

2.2.3 更新模块

npm update <name> [-g] [--save-dev]
// 注意：不要直接删除node_modules下面的模块包

注： npm在安装模块时，是从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），在此可以使用淘宝NPM镜像解决。

2.4 全局安装gulp

npm install -g gulp
// 可输入以下命令看是否安装成功（查看gulp版本）
gulp -v

2.5 初始化一个项目

在磁盘中打开我们的项目目录，按住shift键，在目录下右键，找到在此处打开命令窗口（W）

输入以下命令来初始化一个项目：

npm init

2.6 安装本地gulp

npm install --save-dev gulp

至此，我们已经安装完gulp

三、gulp使用

说明：为了更好的体验，此处我们以压缩js代码为例

3.1 配置gulpfile.js（重点）

gulpfile.js是gulp中必不可少的一部分

// 引入gulp
const gulp = require('gulp');
// 引入uglify，该插件可以压缩混淆js代码
const uglify = require('gulp-uglify');
// 定义js文件的路径
const jsFile = './src/js/**/*.js';
// JS任务
gulp.task('script', function() {
    return gulp.src(jsFile)
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
});

项目目录如下：

3.2 运行gulp

在命令行中输入gulp <任务名称>

gulp script

四、gulp常用插件

• gulp-concat、gulp-rename
• gulp-minify-css、gulp-less、gulp-sass、gulp-sourcemaps
• gulp-jshint、jshint、gulp-uglify
• gulp-imagemin、gulp.spritesmith
• browser-sync

五、DEMO

const gulp = require('gulp');
const sass = require('gulp-sass');
const soucemap = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const minify = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const bs = require('browser-sync').create();
/**
 * 嵌套输出方式 nested
 * 展开输出方式 expanded
 * 紧凑输出方式 compact
 * 压缩输出方式 compressed
 */
gulp.task('scss', function() {
    return gulp.src('./src/scss/**/*.scss')
        .pipe(soucemap.init())
        .pipe(sass({outputStyle: "expanded"}))
        .pipe(soucemap.write('./'))
        .pipe(gulp.dest('./dist/css'))
        .pipe(bs.stream())
});
gulp.task('script', function() {
    return gulp.src('./src/js/**/*.js')
        .pipe(concat('common.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/js'))
});
gulp.task('default', ['scss', 'script'], function() {
    bs.init({
        server: {
            baseDir: './'
        }
    })
    gulp.watch('./src/scss/**/*.scss', ['scss']);
    gulp.watch('./src/js/**/*.js', ['script']);
    gulp.watch("./*.html").on('change', bs.reload);
});