介绍: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. Epson 微型打印机打印 LOGO C#

    由于项目需要使用EPSON微型打印机打印LOGO,在网上查看了很多都是安装驱动然后设置打印机图片. 项目需要使用Bytes发送流,最后在网上找到了一些资料,记录下来方便自己和其他人使用. public ...

  2. scrapy 断点续爬

    第一步:安装berkeleydb数据库 第二部:pip install bsddb3 第三部:pip install scrapy-deltafetch 第四部: settings.py设置 SPID ...

  3. Tomcat 配置MySQL连接池

    <!--配置mysql数据库的连接池,         需要做的额外步骤是将mysql的Java驱动类放到tomcat的lib目录下                maxIdle 连接池中最多可 ...

  4. springboot+dubbo修改扫描路径引起端口占用的问题

    因为在多模块项目中引入了spring security,消费方(控制层)的工程有两个包,一个controller,一个config.引入之前消费方工程的application.properties中s ...

  5. vim字符查找和替换

    一.替换 1. r+<待替换的字母>    将光标处的字母替换为指定的字母 2.R       连续替换直到按下ESC 3.cc      整行替换,并进入插入模式 4.cw     替换 ...

  6. Centos 7下网卡bonding配置之mode4

    一.bonding技术 bonding(绑定)是一种linux系统下的网卡绑定技术,可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡,能够提升网络吞吐量.实现网络冗余.负载等功能,有 ...

  7. py_innodb_page_info

    python py_innodb_page_info.py -v /usr/local/var/mysql/ibdata1 mylib.py #encoding=utf-8 import os imp ...

  8. 100-days: twenty-three

    Title: The surprising connection between single women and gentrification connection n.连接,联系,关系:连接点; ...

  9. logistics回归理解

    多元回归方程:假设有一个因变量y和一组自变量x1, x2, x3, ... , xn,其中y为连续变量,我们可以拟合一个线性方程: y =β0 +β1*x1 +β2*x2 +β3*x3 +...+βn ...

  10. Struts2源码解析2

    看了前面一节对Struts2各个模块运行有了大概了解,也对调用的函数有了一定的了解,本节希望打断点跑一个Struts2例子! 还是放在struts2结构图: 一:项目启动后解析web.xml文件,会解 ...