gulp前端自动化构建工具入门

gulp是基于node.js的一个构建工具（自动任务运行器），开发者可以使用它自动化工作流程。
一些常见的、重复的任务，例如：网页自动刷新、css预处理、代码检测、压缩图片、等，只需要简单的命令就能全部完成。使用它可以简化工作，提高开发效率。

gulp优点：

简洁：gulp侧重“代码优于配置”，最直观的感受，更为简单和清晰，不需要grunt一样写一堆庞大的配置文件。
高效：gulp基于node streams（流）来构建任务，避免磁盘反复读取/写入。每个任务都是单独执行，这使得它速度更快、更为纯粹。
易学：gulp核心API只有4个，简洁的API易于上手，学习过程平滑。

4个API：

• gulp.src(globs,[options]) 指明源文件路径globs：路径模式匹配； option是：可选参数；
• gulp.dest(path,[options]); 指明处理后的文件输出路径path：路径（一个任务可以有多个输出路径）；
• gulp.task(name,[deps],fn); 注册任务 name：任务名称（通过gulp name 来执行这个任务）；
• deps： 可选的数组，在本任务运行中所需要依赖的其他任务（当前任务在依赖任务执行完毕后才会执行）； fn：任务函数（function 方法）；

安装

• 安装nodejs http://nodejs.org

• 创建目录 mkdir mygulp

• 创建配置信息（package.json）： npm init -y

• 安装： 全局安装： npm install gulp -g

          本地安装： npm install gulp --save-dev
  

注： package.json(此文件在node_modules\gulp 目录下)；-Dev：将它作为你的项目依赖添加到中devDependencies内。

插件安装

• 静态服务器（gulp-webserver）
• 网页自动刷新（gulp-livereload）
• 安装命令： npm install gulp-livereload gulp-webserver --save-dev

gulp任务配置

• 在项目目录中创建 gulpfile.js文件，用来配置和定义任务（task）

• 编辑gulpfile.js

// 引入gulp
var gulp = require('gulp');

// 引入gulp插件
// 网页自动刷新
var livereload = require('gulp-livereload');
// 本地服务器
var webserver = require('gulp-webserver');

// 注册任务
gulp.task('webserver',function () {
  gulp.src('./' )  // 服务器根目录
  .pipe(webserver({   // 运行webserver
    livereload: true,    // 启用livereload
    open: true  // 服务器启动时自动打开网页
  }));
});

// 监听任务
gulp.task('watch',function() {
  gulp.watch('*.html',['html'])  //监听根目录下所有HTML文件
})；

// 默认任务
gulp.task('default',['webserver','watch']);

终端命令 ： gulp 自动执行

注：1、gulp插件可以通过gulp官网、npm官网或browsenpm上找到你所要 的插件。2、不要在node_modules文件夹内手动删除插件，请使用命令卸载。因为手动删除的只是下载插件包，但package.json中配置信息并没有清除。3、不要直接移动gulp插件，否则优于系统层级限制，出现错误提示"文件夹名对目标文件夹可能过长，您可以缩短文件夹名并重试，或者尝试路径较短的位置"，此时把文件夹打包成RAR后在操作便可。4、npm常用命令：

• 安装插件： npm [-g] [--save-dev]
• 更新插件：npm update [-g] [--save-dev]
• 卸载插件： npm uninstall [-g] [--save-dev]
• 指定版本： npm install @VERSION [--save-dev] (其中VERSION就是你所需要的版本号)