gulp的使用
一、简介
gulp是一款前端构建工具,是和grunt很类似的一款构建工具,但是相比grunt来说,gulp更轻量级,配置和使用更简单,命令更少,更容易学习和记住。
二、具体的使用
- 安装gulp: npm install -g gulp(全局安装),npm install --save-dev gulp (作为开发时项目的依赖,gulp的信息被写在devDependenices中);
- 在项目的根目录下创建一个gulpfile.js的文件。
- 具体使用:先将要使用到的包进行导入,然后创建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的使用的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- gulp初学
原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js 配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
随机推荐
- Amazon的推荐系统
本文引自http://blog.csdn.net/fwing/article/details/4942886 现在的推荐系统特别火啊.做得最好的应该是Amazon了. 上面是Amazon的图书推荐. ...
- MYSQL删除表的记录后如何使ID从1开始
MYSQL删除表的记录后如何使ID从1开始 MYSQL删除表的记录后如何使ID从1开始 http://hi.baidu.com/289766516/blog/item/a3f85500556e2c09 ...
- sshd 错误
140669086946976:error:0E079065:configuration file routines:DEF_LOAD_BIO:missing equal sign:conf_def. ...
- 深入理解openstack网络架构(3)-----路由
原文地址: https://blogs.oracle.com/ronen/entry/diving_into_openstack_network_architecture2 译文转自:http://b ...
- vc编译 curl 7.36.0
CURL邮件列表中提到官方最新版本的windows devel包中缺少文件,而我又用不到https,所以我就自己下载源码包来编译了 下载源码包:http://curl.haxx.se/download ...
- 设计模式之美:Behavioral Patterns(行为型模式)
行为型模式涉及到算法和对象间职责的分配. 行为模式不仅描述对象或类的模式,还描述它们之间的通信模式. 这些模式刻划了在运行时难以跟踪的复杂的控制流.它们将你的注意力从控制流转移到对象间的联系方式上来. ...
- .NET轻量级MVC框架:Nancy入门教程(二)——Nancy和MVC的简单对比
在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比 ...
- java提高篇(二十)-----集合大家族
在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的Arra ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发(一)Hello World!
ReactMixhttps://github.com/xueduany/react-mix自从昨天发布起来,得到了不少小伙伴的热捧,很高兴帮助大家解决了憋在心中很久的问题“如果我只会HTML,Css, ...
- AngularJS入门教程1--配置环境
首先需要下载AngualrJS,下载地址 https://angularjs.org/ 官方网站提供2种下载使用AngularJS方法: 1. 去GitHub下载 ,点击按钮会跳转到GitHub页面, ...