gulp 入门初步

gulp —— Automate and enhance your workflow
gulp 官方文档
gulp 中文网

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

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

下面我们开始 gulp 的使用。
首先，你得安装 Node.js
然后打开命令行，安装全局 gulp

npm install gulp -g

等待安装完成后，查看是否正确安装，在命令行中执行gulp -v ，出现版本号即为正确安装。

---

• 选装 cnpm
  说明：因为 npm 安装插件是从国外服务器下载，受网络影响大，可能出现异常，淘宝团队就弄了一个 cnpm ：这是一个完整的 npmjs.org 镜像，你可以用此代替官方版本（只读）。同步频率目前为 10 分钟一次以保证尽量与官方服务同步。
  官方网址：http://npm.taobao.org
  安装：命令提示符执行 npm install cnpm --registry=https://registry.npm.taobao.org 注意：安装完后最好查看其版本好 cnpm -v 或关闭命令提示符重新打开，安装完直接使用可能会出现错误；
  注：cnpm 跟 npm 用法完全一致，只是在执行命令时将 npm 改为 cnpm 。

---

在命令行中定位到当前工作目录，例如： D:\gulpdemo 中，作为项目的开发依赖安装：

npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件：

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

运行gulp：

gulp

命令行中会输出 Hello world 。

gulp 的核心 API只有4个，分别是：
gulp.src
gulp.dest
gulp.task
gulp.watch

English API docs
中文API文档

gulp 中的大多数功能都是用外部插件来实现的。gulp 中所有的插件点击这里

---

npm install gulp --save-dev
注： 1. -g：代表全局安装； 2. –save：将保存配置信息至package.json（此文件在 node_modules\gulp 目录下） 3. -dev：将它作为你的项目依赖添加到中devDependencies内（–save和-dev是2个东西，记得分清前面的”-“号） 4. 由于Gulp会自带package.json文件（用于存储项目的元数据），所以这里只做简单介绍（如果你想自己创建，也可通过命令 npm init，然后根据引导填写相关信息）

Gulp插件安装（Install Gulp Plugins）

接着安装我们所需要的插件，这里，我们通过 browser-sync 来实现页面自动刷新：
npm instal browser-sync --save-dev

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;
var watch       = require('gulp-watch');


gulp.task('server',['sass'],function(){   //静态服务器+监听 scss/html文件
    browserSync.init({
        server: './'
    });
    gulp.watch('./sass/*.scss',['sass']);
    gulp.watch('./*.html').on('change',reload);
gulp.watch('./**/*.css').on('change',reload);
});

//sass文件编译
//sass编译后的css注入到浏览器里实现更新
gulp.task('sass',function(){
    return gulp.src('./sass/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('./css'))
        .pipe(reload({stream: true}));
});

gulp.task('default',['server']);

最后，关于 gulp 的更多学习，推荐 -> 一点，有很多不错的 gulp 干货。

写在最后： 约定优于配置——-软件开发的简约原则.


——————————– (完)————————————–

我的
个人网站：https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博：http://weibo.com/Neveryu