一、简介

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. foremost

    foremost 恢复单个类型文件 删除一个 USB(/dev/sdba1)存储器中一个 png 文件然后使用 formost 恢复. #rm -f /dev/sdb1/1.png #foremost ...

  2. Linux网卡bounding详解

    多块网卡绑在一起,作为一个网卡用,实现负载均衡和提高带宽   linux双网卡绑定一个IP地址,实质工作就是使用两块网卡虚拟为一块,使用同一个IP地址,是我们能够得到更好的更快的服务.其实这项技术在 ...

  3. Java中HashMap等的实现要点浅析

    @南柯梦博客中的系列文章对Jdk中常用容器类ArrayList.LinkedList.HashMap.HashSet等的实现原理以代码注释的方式给予了说明(详见http://www.cnblogs.c ...

  4. MSSQL数据库中Text类型字段在PHP中被截断之解 (转)

    在PHP中使用了MSSQL数据库,恰巧数据库中又使用了Text类型字段,于是问题产生了.每次从数据库中查询得到的数据总是被莫名的截断,一开始是以为我使用的PHP框架中对字符串的长度有所限制,后来发现这 ...

  5. td标签内的内容过长导致的问题的解决办法

    问题描述:在开发过程中,td标签中的有一个cell格中的内容过长,导致td标签高度增加,从而导致整个页面内容的不协调:

  6. UNITY 状态机 + SVN + 码云 下篇

    上篇说到自己写的一个FSM状态机,这篇写怎么把代码和码云联系在一起! 首先,我们应该知道为什么使用码云? 码云是开源中国社区2013年推出的基于 Git 的完全免费的代码托管服务,这个服务是基于 Gi ...

  7. Android热修复技术选型(不在市场发布新版本的情况下,直接更新app)

    2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker,它们在原理各有不同,适用场景各异,到 ...

  8. svn patch用法

    最近遇到了一个patch的使用场景: 有一个同事对源码做了一些修改,但是又不想将源码提交到SVN服务器,而我又想得到他所做的修改. patch的使用方法: 创建patch 在要导出“修改”的目录中,单 ...

  9. Quartz.net(调度框架) 使用Mysql作为存储

    最近公司的做的项目中涉及到配置任务地址然后按照配置去目标地址提取相关的数据,所以今天上午在Internet上查看有关定时任务(调度任务)的相关信息,筛选半天然后查找到Quartz.net. Quart ...

  10. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...