gulp前端自动化构建工具

gulp前端自动化构建工具入门：http://www.jianshu.com/p/d003e12e2f55

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 自动执行

注：一、gulp插件能够经过gulp官网、npm官网或browsenpm上找到你所要 的插件。二、不要在node_modules文件夹内手动删除插件，请使用命令卸载。由于手动删除的只是下载插件包，但package.json中配置信息并无清除。三、不要直接移动gulp插件，不然优于系统层级限制，出现错误提示"文件夹名对目标文件夹可能过长，您能够缩短文件夹名并重试，或者尝试路径较短的位置"，此时把文件夹打包成RAR后在操做即可。四、npm经常使用命令：

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