一、简介

gulp是一款前端构建工具,是和grunt很类似的一款构建工具,但是相比grunt来说,gulp更轻量级,配置和使用更简单,命令更少,更容易学习和记住。

二、具体的使用

  1. 安装gulp: npm install -g gulp(全局安装),npm install --save-dev gulp (作为开发时项目的依赖,gulp的信息被写在devDependenices中);
  2. 在项目的根目录下创建一个gulpfile.js的文件。
  3. 具体使用:先将要使用到的包进行导入,然后创建task,针对需要处理的文件进行相应的操作,然后存放在指定的目录中;

加入相应的包的方法: npm install gulp-jshint --save-dev 或npm install gulp --save 或npm install gulp-jshint ,三者都能将gulp-jshint安装成功,但区别是--save-dev 会将安装的包的信息更新到package.json中的devDependenices小节中,而 --save会将包的信息直接写进package.json的dependenices小节中,而没有加这两种的不会将包信息写进package.json中。运行时,使用命令: gulp ,则只会将default任务执行,不会执行其他任务,若要执行 其他任务需要使用命令 gulp [name name] 表示执行指定名称的task; 下图展示了一个gulpfile.js文件的内容:

执行后工程的目录中多了以下目录:

更多具体内容可参见 Gulp中文网: http://www.gulpjs.com.cn/

gulp的使用的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. 使用属性android:onClick,出现异常NoSuchMethodException

    在Activity中注册点击事件有两种方式,setOnClickListener或在xml中设置控件的android:onClick="gotoSecond"属性,在Activit ...

  2. 萝卜白菜,给有所爱——C#和JAVA都会终将被时代淘汰

    看到园子里又有一波试图掀起C#和JAVA的谁更好的争论,对于这些一直不断的争论,我觉得实在没有必要,黑格尔的存在即合理,中国的老古语说的萝卜白菜各有所爱,大家争论的再多其实卵用也没用,还不如趁着闲暇时 ...

  3. PHP——使用header()函数下载文件

    思路:先指明内容的MIME类型,内容描述,内容长度(也即文件大小). 一.下载txt文件的程序: <?phpheader('Content-Type:text/plain');header('C ...

  4. Android学习地址

    Google Android官方培训课程中文版http://hukai.me/android-training-course-in-chinese/

  5. PDO vs. MySQLi 选择哪一个?(PDO vs. MySQLi: Which Should You Use?)-转载

    用Php访问数据的时候,你选择MySQLi和PDO,在选择之前,你应该知道些什么呢? 这篇文章将会介绍这两种方式的不同点,数据库的支持.稳定性.性能等问题. 概述   PDO MySQLi Datab ...

  6. 图片下载缓存防止OOM

    一  ImageManager ImageMemoryCache(内存缓存).ImageFileCache(文件缓存)    关于Java中对象的软引用(SoftReference),如果一个对象具有 ...

  7. JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (3):部署設定及應用 (转帖)

    說明:這一篇主要是說明如何將程式部署到Application Server,以及程式如何運作,產生的檔案置於何處,以及如何以瀏覽器呈現(Applet),或是當成桌面應用程式,或是 桌面Applet,這 ...

  8. Controller的生命周期是Transient还是PerWebRequest?

    当我们用在MVC总使用IoC时,大家的Controller生命周期(lifestyle)是以哪种方式注册的呢? 之前我一直没有思考过这个问题.众所周知在MVC开发过程中,大部分的组件都是以PerWeb ...

  9. [ZigBee] 5、ZigBee基础实验——图文与代码详解定时器1(16位定时器)(长文)

    1.定时器1概述 定时器1 是一个支持典型的定时/计数功能的独立16 位定时器,支持输入捕获,输出比较和PWM等功能.定时器有五个独立的捕获/比较通道.每个通道定时器要使用一个I/O 引脚.定时器用于 ...

  10. 泛型实现中没有正确lock引用类型的一个隐藏bug分析

    最近看到这篇文章dotNetDR_的回复,让我想起一个真实发生的案例,下面就简单说说这个关于lock引用类型的一个不容易发现的隐藏缺陷. 某类库中的代码,封装了很简单的一个通用类,用于线程安全地执行某 ...