介绍:Gulp 是基于node.js的一个前端自动化构建工具,可以使用它构建自动化工作流程(前端集成开发环境);不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,大大提高我们的工作效率。

gulp的相关文件压缩在下一节,传送


初步尝试:

1、安装gulp ,在安装gulp之前要先安装node ,点这里下载

(当前是win,mac用户加sudo)

npm install gulp -g //全局安装gulp

2、创建gulp项目

进入项目目录,在跟目录下执行

npm init    创建一个packpage.json文件   json文件里没有注释

根据命令提示,设置json参数

{
  "name": "test",   //项目名称(必须)
  "version": "1.0.0",   //项目版本(必须)
  "description": "This is for study gulp project !",   //项目描述(必须)
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "simbals",
    "email": "*******@qq.com"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

  

3、局部安装gulp

npm install gulp --save-dev 

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

  -dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

  使用—save-dev,将通知计算机在package.json中添加gulp依赖。 执行完之后,gulp将创建node_modules文件夹,里面有个gulp文件夹(如下图)


  

4、根目录下创建gulpfile.js文件

var gulp = require('gulp');  //Node去node_modules中查找gulp包
gulp.task('hello', function() { //命名一个简单任务
console.log('Hello World!');
});

5、执行gulp任务

 gulp hello  // hello 是任务名  

 命令行出现 :

Hello World!

gulp使用入门的更多相关文章

  1. gulp详细入门教程

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

  2. 【原】gulp快速入门

    今天刚入职了一家新公司,结果明天就要开始项目了.上级说要用gulp来打包代码,所以今晚花了一晚来看这个gulp, 可以说已经入门了.所以做一个小小的总结 : 首先全局安装gulp npm instal ...

  3. gulp详细入门教程(转载)

    本文转载自: gulp详细入门教程

  4. gulp快速入门

    gulp快速入门 因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目 ...

  5. gulp快速入门&初体验

    前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...

  6. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  7. Gulp新手入门教程

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 ...

  8. JS那些事儿——Gulp的入门使用

    前言 新人使用gulp的一个记录. 首先对于第一个新事物,我会问gulp这是什么? 答:gulp是一个自动化构建工具,它可以做一些自动化的任务,比如: 检查Javascript 编译Sass(或Les ...

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

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

  10. gulp详细入门教程-gulp demo download

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

随机推荐

  1. 传统应用、服务器集群、分布式、SOA各种架构的简单解释

    传统架构:无论是SE应用还是WEB应用,传统架构都是表现层---业务层---持久层---数据库   1000并发(tomcat单台500并发,tomcat一般做集群的话,节点数量不能太多,5个左右): ...

  2. python学习Day6 元组、字典、集合set三类数据用法、深浅拷贝

    一.深浅拷贝 1.  值拷贝 ls1 = ls2  不开辟空间,指针跟着走.(直接将ls1中存放的地址拿过来,内存中不会开辟新的空间,所以你怎么变,我也跟着变.)(ls1内部的所有类型的值发生改变,l ...

  3. Python来袭,教你用Neo4j构建“复联4”人物关系图谱!

    来源商业新知网,原标题:Python来袭,教你用Neo4j构建“复联4”人物关系图谱!没有剧透! 复仇者联盟 之绝对不剧透 漫威英雄们为了不让自己剧透也是使出了浑身解数.在洛杉矶全球首映礼上记者费尽心 ...

  4. Jmeter固定定时器(Constant Timer)

    如上图,Constant Timer是jmeter固定定时器元件 一般用来设置延时的,放在某个请求下,表示Constant Timer配置的指定时间后,再开始发起这个请求操作(单位:毫秒) 根据Con ...

  5. html入门第一天(知识总结)。

    一文本标签:----------双标签.<b>标签 <strong>标签,文本呈现粗体(Html5中建议用strong,strong语义更强)<i>标签 <e ...

  6. 大数据入门到精通17--union all 和disctinct 的用法

    一.union all 的用法.使用union all 或者 unionselect * from rental where rental_id <10union allselect * fro ...

  7. PhoenixFD插件流体模拟——UI布局【Interaction】详解

    流体交互 本文主要讲解Interaction折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Interaction 主要 ...

  8. Ubuntu ROS

    设置你的sources.list 将电脑设置为接受来自packages.ros.org的软件 sudo sh -c 'echo "deb http://packages.ros.org/ro ...

  9. 【转载】【吵架】能力 说清自己的能力。表达清楚 ;别人发飙你也要撕b;换位思考,把自己当领导层

    女上司和别人在会议室吵架,大家都说她变态.女人能当好领导吗?  治敏@为好优 2018-06-20 19:56:00 为好优姐姐: 想问问您,是不是职场女强人,都是那种彪悍的战斗机呀! 我刚来公司实习 ...

  10. 51单片机学习笔记(清翔版)(13)——LED点阵、74HC595

    如图3,点阵屏分单色和彩色,点阵屏是由许多点组成的,在一个点上,只有一颗一种颜色的灯珠,这就是单色点阵屏,彩色的在一个点上有三颗灯珠,分别是RGB三原色. 图4你可能没看出来,那么大块黄色的就是点阵屏 ...