gulp 构建工具 1. gulp 的简介 2.  关于gulp之前的 介绍 3. 正式进入 gulp的学习 4. 本地安装 gulp 插件 5. 新建gulpfile.js 文件(重要) 6.  运行 gulp

  gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统 的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发 更加快速高效。

  在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次 在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行 gulp任务即可。

  安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

2.  关于gulp之前的 介绍

  首先是nodejs的安装 使用版本管理器 git。 通过 git bush 来进行版本管理操作。

  可以通过查看版本号来检测是否安装成功

  node -v (node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等))

  npm -v

  gulp --version

  使用 npm 安装插件: npm install <name> [-g] [--save-dev]

            npm install gulp-less --save-dev

  -g 全局安装

    配置package.json的配置信息 通过npm init命令。

  --save  将保存配置信息至package.json (package.json 是 nodejs项目配置文件

  -dev  保存至package.json 的 devDependencies节点  不指定-dev 将保存至depengdencies节点。

 选装 cnpm

  因为主要是因为npm是从国外的服务器下载 受网络影响。 所以 使用淘宝镜像。

  安装 cnpm  npm install cnpm -g --registry=https://registry.npm.taobao.org

  使用方法跟npm 完全一样。

3. 正式进入 gulp的学习

   全局安装 gulp  

    cnpm install gulp -g

  查看版本号 gulp --version

  新建package.json文件 package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

   $ npm init

   package.json 是类似这样的一个json文件(注意 在json内部是不能写注释的)

   gulp 构建工具
1. gulp 的简介
2.  关于gulp之前的 介绍
3. 正式进入 gulp的学习
4. 本地安装 gulp 插件
5. 新建gulpfile.js 文件(重要)
6.  运行 gulp

4. 本地安装 gulp 插件

  本地安装 cnpm install gulp --save-dev

  以示例 gulp-less为例(编译 less文件) 命令提示符执行 cnpm install gulp-less --save-dev

  将会安装在node_modules的 gulp-less 目录下。 改目录下有一个gulp-less的使用帮助文档 README.md

  PS: 全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能

  

5. 新建gulpfile.js 文件(重要)

    gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。

    

//导入工具包 require('node_modules里对应模块')
//本地安装gulp所用到的地方
;
 
  //定义一个testLess任务(自定义任务名称)
{
//该任务针对的文件
//该任务调用的模块
//将会在src/css下生成index.css
;
 
//定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务
 
  //gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
  //gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)
  //gulp.dest(path[, options]) 处理完后文件生成路径
  

6.  运行 gulp

  命令提示符 gulp任务名称

  编译less 命令提示符 执行 gulp testless

;
 
{
;
  
 
  gulp.js 的 API 非常简单,我们只需要了解四个就足以应对绝大多数的脚本编写了
  
  
  gulp.task(name[,deps ], fn):注册任务
    
  name 是任务名称; deps是可选的数组 其中列出需要在本任务运行要执行的任务;fn 是任务体。这是gulp.js的核心了。需要花时间来吃  透。详情见此
  
   gulp.src( globs[,options]) 指明源文件路径
  
  gulp.dest(path) 指明任务处理后的目标输出路径
  
  gulp.watch(glob[,options],tasks)监视文件的变化并运行相应的任务。你没看错,watch 作为核心 API 出现在 gulp.js 里了,
 
 
 插件
  
  A) 语法检查 (gulp-jshint)
  
  B) 合并文件 (gulp-concat)
  
  C) 压缩代码 (gulp-uglify)
  
  D) 文件重命名 (gulp-rename)
 
 
$ cnpm install <plugin_name> --save-dev
 
最后的代码完成如下
  
  
  gulp 构建工具
1. gulp 的简介
2.  关于gulp之前的 介绍
3. 正式进入 gulp的学习
4. 本地安装 gulp 插件
5. 新建gulpfile.js 文件(重要)
6.  运行 gulp
 
 
  可以看出,基本上所有的任务体都是这么个模式:
 
   gulp 构建工具
1. gulp 的简介
2.  关于gulp之前的 介绍
3. 正式进入 gulp的学习
4. 本地安装 gulp 插件
5. 新建gulpfile.js 文件(重要)
6.  运行 gulp
 
   非常容易理解!获取要处理的文件,传递给下一个环节处理,然后把返回的结果继续传递给下一个环节……直到所有环节完成。
 
  pipe 就是 stream 模块里负责传递流数据的方法而已,
    
  至于最开始的 return 则是把整个任务的 stream 对象返回出去,以便任务和任务可以依次传递执行。
 
 
   写成下面的方式 更为直观
  
 
   gulp 构建工具
1. gulp 的简介
2.  关于gulp之前的 介绍
3. 正式进入 gulp的学习
4. 本地安装 gulp 插件
5. 新建gulpfile.js 文件(重要)
6.  运行 gulp