Gulp前端自动化工具的用法

Gulp简介

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

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

安装node.js

这里笔者建议到node.js的官网去下载最新版的。因为笔者曾经试过直接下载菜鸟里面的node.js，安装后发现版本是4.4.3，不符合gulp-sass的最低版本要求。

安装gulp

win+r然后输入cmd进入命令提示符，在命令提示符中输入npm install gulp -g，即可全局安装gulp。

新建package.json

node.js安装完后，进入命令提示符。然后进入自己项目的根目录（盘符加冒号，转到对应的盘符，如D：。cd+路径，转到该盘下对应的路径如：cd D:\gulp_workplace）。

执行命令 npm init 来新建package.json，接下来就是一些package.json的内容填写，可以一直按回车跳过。

webstorm

笔者这里使用了webstorm打开了项目，然后在项目的根目录新建一个名为gulpfile.js的文件（必须为这个名字），然后在空白处右键，即可在webstorm中打开命令提示符。

安装gulp常用插件

在命令提示符中输入npm install gulp-imagemin --save -dev（这是图片压缩插件，安装其他插件更改【gulp-imagemin】即可）。

常用插件

sass的编译（gulp-sass）

less编译 （gulp-less）

重命名（gulp-rename）

自动添加css前缀（gulp-autoprefixer）

压缩css（gulp-clean-css）

js代码校验（gulp-jshint）

合并js文件（gulp-concat）

压缩js代码（gulp-uglify）

压缩图片（gulp-imagemin）

自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）

图片缓存，只有图片替换了才压缩（gulp-cache）

更改提醒（gulp-notify）

gulp及其插件的用法

/*
*常用方法
* gulp.task--定义任务
* gulp.src--找到需要执行任务的文件
* gulp,dest--执行任务的文件的去处
* gulp.watch--观察文件是否发生变化
 */

        先定义gulp，然后定义任务（demo），最后在命令提示符中输入gulp demo，即可执行demo任务。

var gulp=require("gulp");

//定义任务
gulp.task("demo",function () {
    return console.log("gulp is running")
});

  gulp插件的使用方法也差不多，这是图片压缩插件的用法。先定义imagemin，通过gulp.task定义任务（imageMin）。找到需要执行的文件（/*是全部，/xxx.png是单个文件）,然后执行刚刚定义的imagemin函数，执行完imagemin函数后，通过gulp.dest方法把压缩后的图片存储到相应的路径。在命令提示符中输入gulp imageMin即可执行imageMin任务。

var gulp=require("gulp");
var imagemin=require("gulp-imagemin");

//图片压缩  安装：npm install gulp-imagemin --save -dev
gulp.task("imageMin",function () {
    gulp.src("src/images/*")
        .pipe(imagemin())
        .pipe(gulp.dest("dist/images"))
});

全部代码

var gulp=require("gulp");
var imagemin=require("gulp-imagemin");
var uglify=require("gulp-uglify");
var sass=require("gulp-sass");
var concat=require("gulp-concat");
var minicss=require("gulp-clean-css");
/*
*常用方法
* gulp.task--定义任务
* gulp.src--找到需要执行任务的文件
* gulp.dest--执行任务的文件的去处
* gulp.watch--观察文件是否发生变化
 */
//定义任务
gulp.task("demo",function () {
    return console.log("gulp is running")
});
//定义默认任务
gulp.task("default",function () {
    return console.log("默认任务，只需要执行gulp即可！")
});
//拷贝文件
gulp.task("copyhtml",function () {
    gulp.src("src/*.html")
        .pipe(gulp.dest("dist"))
});
//图片压缩  安装：npm install gulp-imagemin --save -dev
gulp.task("imageMin",function () {
    gulp.src("src/images/*")
        .pipe(imagemin())
        .pipe(gulp.dest("dist/images"))
});
//压缩js 安装：npm install gulp-uglify --save -dev
gulp.task("minify",function () {
    gulp.src("src/js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
});
//sass转换为css 安装：npm install gulp-sass --save -dev
gulp.task("sass",function () {
    gulp.src("src/sass/*.scss")
        .pipe(sass().on("error",sass.logError))
        .pipe(gulp.dest("dist/css"))
});
//压缩css 安装npm install gulp-clean-css --save -dev
gulp.task("minicss",function () {
    gulp.src("src/css/style1.css")
        .pipe(minicss())
        .pipe(gulp.dest("dist/css"))
});
//代码合并 安装：npm install gulp-concat --save -dev
gulp.task("script",function () {
    gulp.src("src/js/*.js")
        .pipe(concat("main.js"))
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
});
//执行多个任务
gulp.task("multi_demo",["demo","copyhtml","imageMin","minify","sass"]);
//监听文件是否发生变化
gulp.task("watch",function () {
    gulp.watch("src/js/*.js",['script']);
    gulp.watch("src/image/*",['imageMin']);
    gulp.watch("src/sass/*.scss",['sass']);
    gulp.watch("src/*.html",['copyhtml']);
});