Gulp初识及使用小例子

所谓Gulp

官方定义：基于文件流的构建系统

特点

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

Gulp的安装

1. 安装Node

官方Node：https://nodejs.org，npm（基于命令行的node包管理工具）会一起被安装。

安装完成后使用相应命令可以查看版本号以确定是否成功安装

node -v 
//v4.4.5

npm -v 
//3.10.9

2. 安装Gulp

a. 先全局安装 gulp

$ npm install --global gulp

b. 项目根目录下创建package.json文件

优先使用命令行

$ npm init

也可以手动添加

{
  "name": "gulp", //项目名称
  "version": "1.0.0", //项目版本
  "description": "this is a test for gulp",  //项目描述
  "main": "index.js", //项目入口文件
  "dependencies": {  //项目依赖的插件
    "gulp": "^3.9.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "simmin", //项目作者信息
  "license": "ISC" //项目许可协议
}

b. 再作为项目的开发依赖（devDependencies）安装

项目目录下：

$ npm install --save-dev gulp

d. 在项目根目录下创建gulpfile.js文件

var gulp = require('gulp');
gulp.task('default', function() {  
  // 将你的默认的任务代码放在这
  console.log(123);
});

“default”为任务名

e. 运行 gulp

$ gulp default

执行结果：

[11:27:55] Starting 'default'...
123
[11:27:55] Finished 'default' after 848 μs

$ gulp
默认的名为 default 的任务（task）将会被运行

想要单独执行特定的任务（task），需输入 gulp 。

cnpm 是淘宝团队在国内搭的一个完整的npmjs.org的镜像，可以以此代替官方npm版本。网址：http://npm.taobao.org；安装：npm install cnpm -g –registry=https://registry.npm.taobao.org；安装完成：cnpm -v查看版本号

Gulp的使用之css sprite

安装gulp.spritesmith插件
$ cnpm install gulp.spritesmith
根目录创建gulpfile.js

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
  gulp.src('./src/img/*.png')
    .pipe(spritesmith({
      imgName: 'icon.png',  //参数，生成图片文件名
      cssName: 'icon.css',  //参数，生成的样式文件名
      cssTemplate: './src/png_template.hbs'  //参数，样式文件模板的路径，默认使用的是handlerbars模板
    }))
    .pipe(gulp.dest('dist/img'));
});

定义样式文件模板

// 主要增加了一个通用样式，给图标赋予内联块级样式
.icon {
  display: inline-block;
}
{{#sprites}}
.icon-{{name}} {
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/sprites}}

运行及结果
$ gulp sprite

执行结果：

[11:57:56] Using gulpfile D:\xxx\xxx\gulp\gulpfile.js
[11:57:56] Starting 'png'...
[11:57:56] Finished 'png' after 8.42 ms

生成了两个文件icon.css和icon.png

//icon.css
.icon {
  display: inline-block;
}
.icon-agenda {
  background-image: url(icon.png);
  background-position: 0px -64px;
  width: 30px;
  height: 31px;
}
.icon-airplane {
  background-image: url(icon.png);
  background-position: 0px 0px;
  width: 32px;
  height: 32px;
}
...

icon.png

在html中使用：

<!DOCTYPE html>
<html>
<head>
	<title>CSS Sprite</title>
	<link rel="stylesheet" href="./dist/png/icon.css" charset="utf-8"><!--引用生成的css文件-->
</head>
<body>
<div>
    <!--直接给标签添加样式类-->
    <i class="icon icon-agenda"></i>
    <i class="icon icon-airplane"></i>
</div>
<div>
	<i class="icon icon-calendar"></i>
</div>
</body>
</html>

Gulp的使用之编译scss

安装gulp-sass
$ npm install --save-dev gulp-sass

gulpfile.js 和scss文件

//编译sass
var gulp = require('gulp');
const sass = require('gulp-sass'); //scss编译
gulp.task('scss',()=>{
    gulp.src('src/css/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css')); //将生成好的css文件放到dist/css文件夹下
});

//index.scss
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;
$bgColor: #AB9393;
body {
  font-family: $fontStack;
  color: $primaryColor;
  background-color:$bgColor;
}

运行及结果
$ gulp scss

生成index.css文件

body {
  font-family: Helvetica, sans-serif;
  color: #333;
  background-color: #AB9393; 
}

Gulp的使用之实时刷新

这里使用刷新工具browser-sync

安装browser-sync插件
$ npm install --save-dev browser-sync

gulpfile.js

//实时更新
const browserSync = require('browser-sync').create(); //实时刷新
const reload = browserSync.reload;
gulp.task('real-time',['scss'],function () {
    browserSync.init({
        server:{
            baseDir:'./'  //设置服务器的根目录
        },
        logLevel: "debug",
        logPrefix:"dev",
        browser:'chrome',
        notify:false //开启静默模式
    });
    //使用gulp的监听功能，实现编译修改过后的文件
    gulp.watch('src/css/scss/*.scss',['scss']);   
    gulp.watch(('*.html')).on('change',reload);
});

运行及结果

$ gulp real-time

实时刷新

存在的问题

上面最后两行代码

gulp.watch('src/css/scss/*.scss',['scss']);

监听src/css/scss/目录下的所有scss文件，如有变动便执行scss任务。

gulp.watch(('*.html')).on('change',reload);

监听所有html文件，如有变动就重新加载。

问题：只有html变动，页面才会实时刷新。若只css变动，而html未变动，则页面不会实时刷新。这是代码的缺陷，暂时没能解决。

附上我的项目目录结构：

目录结构

gulp常用地址：

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424

参考文档：

所谓Gulp
Gulp的安装
1. 1. 安装Node
2. 2. 安装Gulp
Gulp的使用之css sprite
Gulp的使用之编译scss
Gulp的使用之实时刷新
参考文档：