1. 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内部是不能写注释的)

   

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里对应模块')
  var gulp = require('gulp'), //本地安装gulp所用到的地方
      less = require('gulp-less');
 
  //定义一个testLess任务(自定义任务名称)
  gulp.task('testLess', function () {
      gulp.src('src/less/index.less') //该任务针对的文件
          .pipe(less()) //该任务调用的模块
          .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
  });
 
  gulp.task('default',['testLess', 'elseTask']); //定义默认任务 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

  var gulp = require('gulp');
 
    gulp.task('default', function () {
  });
  
 
  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
 
最后的代码完成如下
  
  
  
 
 
  可以看出,基本上所有的任务体都是这么个模式:
 
   
 
   非常容易理解!获取要处理的文件,传递给下一个环节处理,然后把返回的结果继续传递给下一个环节……直到所有环节完成。
 
  pipe 就是 stream 模块里负责传递流数据的方法而已,
    
  至于最开始的 return 则是把整个任务的 stream 对象返回出去,以便任务和任务可以依次传递执行。
 
 
   写成下面的方式 更为直观
  
 
   

gulp 构建工具的更多相关文章

  1. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  2. [翻译]在gulp构建工具中使用PostCSS

    前言 PostCSS已经在一段时间内迅速普及,如果你还不知道PostCSS或还没有使用它,我建议你看一下之前的一篇介绍文章<PostCSS简介>,其中介绍了使用PostCSS的基本方法,包 ...

  3. ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grun ...

  4. gulp构建工具学习汇总

    前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 ...

  5. gulp构建工具的安装

    第一步:node.js安装 在gulp安装之前,本机需要node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序.npm会随着安装包一起安装 ...

  6. 使用gulp构建工具

    之前一个demo中用的是grunt,照着grunt用到的插件找了下gulp的,总体使用还算顺畅,说实话并不觉得学习成本有降低什么的,差不多.不过也遇到一些问题: 1.gulp.dest()输出目录需要 ...

  7. express+gulp构建项目(二)启动项目和主文件

    这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...

  8. 构建工具--glup如何压缩,丑化代码

    目录 为什么使用 实现 为什么使用 最近在迭代公司的项目,发现项目有如下缺点: 代码没有压缩,js文件,内存大,放在服务器上占空间: 源代码没有混淆或者丑化处理,本公司的程序员写出来的代码和高质量逻辑 ...

  9. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

随机推荐

  1. swift和oc混编

    请参考这篇博客:点击查看

  2. TimeSpinner( 时间微调) 组件

    本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个组件依赖于Spinner(微调)组件. 一. 加载方式//class 加载方式<input id="box& ...

  3. “=”号和“:”的区别,Html.Raw()的使用

    “=”号,将原封不动输出字符串到页面 “:”号:将字符串进行编码后输出到页面 public ActionResult HtmlEncodeDemo() { ViewData["strScri ...

  4. java中的变量

    变量就是命名的内存空间 1.声明和赋值方式:数据类型   变量名 = 值: 数据类型即划分的内存空间,变量名即划分出的内存空间的名 2.变量必须先声明才能使用,不能使用一个没有经过预先声明的变量:没有 ...

  5. IE浏览器下a标签嵌套img标签默认带有边框

    最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

  6. 2:numpy---ndarray

    ndarray即是多维数组[n dimension array] 一:创建ndarray 有好几种创建数组的方法. 例如,你可以使用 array 函数从常规的Python列表和元组创造数组.所创建的数 ...

  7. 今天工作中遇到的根据用户id取得产品大类和相关小类的问题

    今天做了一个项目,需求是客户登陆后,可以从会员中心发布详细信息(包括联系信息和公司信息),插入到数据库后在将来生成一个公司页面模板,一般的产品大类+小类 用repeater嵌套就可以了,但是这个涉及到 ...

  8. hibernate 核心总结 (面试)

    1:1(类与类之间) husband----wife 外键关联: a)单向@OneToOne b)双向@OneToOne, mappedby="husband" --------- ...

  9. web前端工程师学习之路开启(前言)

    web前端工程师需要掌握的所有技能 图解1: 图解2:

  10. ICP编程软件配置(烧写KEIL编译后的bin文件)

    1. 安装NuMicro_ICP_Programming_Tool_1.29.6425软件 2. 打开软件后选择目标芯片后点击“连接”按钮 3. 添加程序 4. 点击设定按钮进行设定 5. 点击开始 ...