介绍: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. Hive学习笔记记录

    典型数据来源: 文件管理服务: FTP文件服务:采用c/s模式,用户可以通过不同的客户端实现文件的上传与下载. NFS文件服务:借助于TCP/IP协议实现网络文件共享 Samba文件服务:是一种在局域 ...

  2. IDEA中使用中jetty启动java项目(非springboot)

    1.安装maven helper插件,略 2.项目pom.xml文件中添加jetty插件配置 <build> <plugins> <plugin> <grou ...

  3. Ubuntu上部署tomcat后无法访问8080端口问题

    在tomacat的bin目录下,修改startup.sh文件,添加信息: #set java environment export JAVA_HOME=/usr/java/jdk1.8.0_111 e ...

  4. Java框架spring 学习笔记(八):注入对象类型属性

    使用set方法注入对象属性 编写UserDao.java文件 package com.example.spring; public class UserDao { public void print( ...

  5. pl/sql developer 问题总结

    问题1,出现NLS_LANG和字符集(Character set)问题 安装完PL/SQL后打开,遇到如图问题. 原因:这是因为系统没有设置NLS_LANG系统变量. 解决方法:有两种方式查看. 1. ...

  6. js 一键复制

    function copyURL(id){ var siteId=$("#siteId").val() var oInput = document.createElement('i ...

  7. netty(七) Handler的执行顺序

    Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet中的filter很像,通过Handler可以完成通讯报文的解码编码.拦截指定的报文.统一对日志错误进行处理.统一对 ...

  8. HBase Master HA高可用

    HMaster没有单点问题,HBase中可以启动多个HMaster,通过Zookeeper的Master Election机制保证总有一个Master运行. 所以这里要配置HBase高可用的话,只需要 ...

  9. Unity3d项目入门之虚拟摇杆

    Unity本身不提供摇杆的组件,开发者可以使用牛逼的EasyTouch插件或者应用NGUI实现相关的需求,下面本文通过Unity自身的UGUI属性,实现虚拟摇杆的功能. 主参考 <Unity:使 ...

  10. <web-view>中JSSDK

    如果只是使用wx.miniProgram.navigateTo这种导航的接口,jssdk可以不用做配置,引用js后直接使用就行,如果chooseImage这种,就需要获取配置了,步骤如下: 先在后端通 ...