介绍: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. jquery中checkbox的选中,反选,全不选 注意1.6版本以上将attr改成prop

    <script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bi ...

  2. Jenkins Maven Selenium TestNG踩坑记

    1)Maven TestNG什么的都配置好了,在本地用eclipse->Run AS->MAVEN INSTALL运行正常 2) Jenkins安装了插件,也建立了MAVEN项目.MAVE ...

  3. selenium调用webdriver异常

    使用selenium调用webdriver的时候报错. from selenium import webdriver browser = webdriver.Chrome() browser.get( ...

  4. C#移除URL上指定的参数

    /// <summary>        /// 移除URL上指定的参数,不区分参数大小写        /// </summary>        public static ...

  5. 腾讯2019年暑期实习生招聘提前批在线笔试技术研究和数据分析方向t2(python)

    小Q有一叠纸牌,一共有n张,从上往下依次编号为1~n.现在小Q要进行以下重复操作:把位于顶端的牌扔掉,把新的顶端的牌放到这叠牌的底部.小Q会一直操作到只剩下一张牌为止,小Q想知道每次扔掉的牌的编号.[ ...

  6. 登录注册页面(连接MySQL8.0.15版本)

    原文链接:https://mp.weixin.qq.com/s?__biz=MzI4Njg5MDA5NA==&mid=2247483779&idx=1&sn=e23e68e96 ...

  7. SQL数据库索引理解与应用【转贴--收藏】

    SQL数据库中索引分为聚集索引(CLUSTERED)和非聚集索引(NONCLUSTERED)两种. 聚集索引确定表中数据的物理顺序,它就类似与电话簿,按照姓氏排列数据.由于聚集索引规定数据表中的物理顺 ...

  8. php hook编程机制

    说明 hook,中文翻译为钩子,编程中的钩子类似我们现实中的钩子,需要挂在东西的时候    直接挂载到上面即可.程序中也是,需要运行的代码挂载到上面即可.         具体思想就是:在项目代码中, ...

  9. redis哨兵集群

    Sentinel 哨兵 修改src下的sentinel.conf文件 , 配置端口  :port:随便   daemonize yes 配置主服务器的ip 和端口 我们把监听的端口修改成7000,并且 ...

  10. code first , Migration

    文章引用至: https://www.cnblogs.com/panchunting/p/entity-framework-code-first-migrations.html 随着业务的增加, 之前 ...