前端自动化工具——gulp详细入门教程

本文github地址
简介：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

一、简要

步骤：全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

二、具体操作

1. 全局安装gulp

npm install gulp -g

2. 新建package.json文件

说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。方便自己也方便他人，这个工作中慢慢体会。
有两种方法：其一利用webstrom编辑器新建一个package.json文件；其二在当前目录下输入npm init 初始化，然后一路开车。
如下图：

3. 本地安装gulp插件

npm install --save-dev  xxx //注意此处的xxx是你要用到的插件名称。

ps：熟练的话可以连着写。
注意：安装完成之后会有两个变化，一个是在当前目录下多了一个node_modules文件夹，文件package.json下多两行字

4. 新建gulpfile.js文件（重要）

说明：gulpfile.js是gulp项目的配置文件，用于编写任务的，也就是让gulp做什么怎么做！

大概分三步：

引入所需模块（必须已经用npm安装过）
编写任务
执行任务

例1：看一个将项目文件（css、html、js、图片）压缩过程。

注意：这里的js文件因为使用了es6的语法，所以必须将其转为es5语法在进行压缩

//引入模块
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var cssmin=require('gulp-cssmin');
var imagemin=require('gulp-imagemin');
var concat=require('gulp-concat');
var babel = require('gulp-babel');//识别es6语法转为es5
var es2015Preset = require('babel-preset-es2015');

//编写任务
/* --------------------   压缩css文件   -------------------- */
gulp.task('compress:css',function(){
    gulp.src('src/demo/css/*.css')//配置要压缩的文件源路径
        .pipe(cssmin()) //该任务调用的模块
        .pipe(gulp.dest('build/demo_compress/css'))  //生成文件保存的路径
});
/* --------------------   压缩js文件（首先将es6语法转化为es5语法）   -------------------- */
gulp.task('es6to5', function() {
    return gulp.src('src/demo/js/*.js') //配置要压缩的文件源路径
        .pipe(babel({presets: [es2015Preset]}))
        .pipe(gulp.dest('./res/js/'));
});
gulp.task('compress:js', ['es6to5'], function() {
    return gulp.src('./res/js/app.js')
        .pipe(uglify({
            mangle: false,//类型：Boolean 默认：true 是否修改变量名
            compress: true,//类型：Boolean 默认：true 是否完全压缩
        }))
        .pipe(gulp.dest('build/demo_compress/js'));
});
/* --------------------   压缩img文件（可能会失真）   -------------------- */
gulp.task('compress:img',function(){
    gulp.src('src/demo/image/*.gif')
        .pipe(imagemin())
        .pipe(gulp.dest('build/demo_compress/image'))
});
/* --------------------   压缩html文件   -------------------- */
gulp.task('compress:html',function(){
    gulp.src('src/demo/*.html')
        .pipe(htmlmin({
            removeComments: true,       //删除注释
            collapseWhitespace: true   //删除空格
        }))
        .pipe(gulp.dest('build/demo_compress/'))
});
//监听模块 ---（就是监听某一个文件发生改变的时候知道自动执行相应的压缩任务）
//gulp.watch('src/demo/*.html',['compress:html']);
//注册默认任务 --- （在当前目录下执行“gulp”指令即可）
gulp.task('default',['compress:css','compress:js','compress:img','compress:html']);

5. 运行gulp

//输入命令 gulp
gulp

6. 补充

一般工作过过程中我们拿到的文件，一般就是分两步：

npm install
gulp