gulp是基于Node.js的自动任务运行器。可以自动完成html、image、css和js等文件的检测、检查、合并、压缩、格式化等,并监听文件在改动后重复指定的这些步骤。

一.首先,我全局安装了gulp

npm install -g gulp

  此时,可以将gulp理解为 node的一个模块

二.使用

  基于具体的某个项目。

  ※ 项目安装gulp,本地方式来安装

  ※ 安装相应的gulp插件

  ※ 配置gulpfile.js  需要编写一些js代码,编写任务

  ※ 运行任务

    注意全局安装和本地安装的各自作用

    全局安装,是为了在任何地方,可以使用gulp 命令来执行任务。

    本地安装,是因为在编写任务的时候,需要用到gulp模块中的一些功能(方法/函数)

  简单实例:

    第一步,新建一个目录 gulp-demo,作为项目目录

    第二步,本地安装gulp

         gulp-demo中本地打开cmd命令:

npm install gulp

        这里问题来了

        

      提示“open....package.json”,但是发现安装完后不存在package.json,此时,就必须新建一个package.json

      执行命令

npm init

  

  完成!

  说明:

  第三步,编写gulpfile.js文件

//引入gulp模块
const gulp=require('gulp');
//编写第一个任务
gulp.task('task1',function(){
setInterval(function(){
console.log('hello,gulp!');
},200);
})

  运行

  

   项目目录结构:

  

  

参考文章:http://www.ydcss.com/archives/18#lesson6

gulp填坑记(一)的更多相关文章

  1. gulp填坑记(二)——gulp多张图片自动合成雪碧图

    为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...

  2. UiAutomator2.0升级填坑记

    UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...

  3. Android项目开发填坑记-Fragment的onBackPressed

    Github版 CSDN版 知识背景 Fragment在当前的Android开发中,有两种引用方式,一个是 Android 3.0 时加入的,一个是supportV4包中的.这里简称为Fragment ...

  4. Android项目开发填坑记-Fragment的onAttach

    背景 现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写 ...

  5. Android项目开发填坑记-so文件引发的攻坚战

    故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...

  6. minikube windows hyperx填坑记

    minikube windows hyperx填坑记 安装了一天半,还是没行,先放弃 开始 minikube start --vm-driver=hyperv --hyperv-virtual-swi ...

  7. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  8. Java web 开发填坑记 2 -如何正确的创建一个Java Web 项目

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72566261 本文出自[赵彦军的博客] Java web 开发填坑记 1-如何正确 ...

  9. Appium+python自动化(十三)- 输入中文 - 一次填坑记(超详解)

    简介 无论你在哪里,在做什么都会遇到很多坑,这些坑有些事别人挖的,有些是自己挖的.别人挖的叫坑人,自己挖的叫自杀,儿子挖的叫坑爹.因此在做app自动化道路上也不会是一帆风顺的,你会踩很多坑,这些坑和你 ...

随机推荐

  1. Python内置函数(53)——setattr

    英文文档: setattr(object, name, value) This is the counterpart of getattr(). The arguments are an object ...

  2. 请求方式:request和 get、post、put

    angular 的 http 多了 Request, Headers, Response ,这些都是游览器的"新特性" Fetch API. Fetch API 和以前的 xmlh ...

  3. ABP CORE 框架入门视频教程《电话薄》基于 Asp.NET Core2.0 EF Core

    ABP框架简介 ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行 ...

  4. Django--ORM基本操作

    一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pr ...

  5. jupyter notebook的架构

    最近项目需要改写jupyter notebook的内核,由于内功不够,英语过差,读文档真的是心痛,然后各种搜索找到了一篇不错的讲解. 转自:http://blog.just4fun.site/jupy ...

  6. find()用法

    >>> str = '编程改变世界'>>> str.find('编')0>>> str.find('程')1>>> str.fi ...

  7. Canvas绘制五角星

    from tkinter import * import math as m root = Tk() w = Canvas(root, width=200, height=100, backgroun ...

  8. Ubuntu+apt-get update时的源

    源是通过 /etc/apt/sources.list # file /etc/apt/sources.list.d # dir 来确定的, 只要将其中的相应文件/相应行删除了, 在apt-get up ...

  9. eclipse下如何使用Hibernate反转工程生与数据库对应的实体类和映射文件(以MySQL为例)

    首先需要为eclipse添加对Hibernate的支持(也就是下载的Hibernate中的jar包),下载方法另查,这里不多做阐述. 想要使用反转工程,首先要下载Hibernate反转工程的插件Jbo ...

  10. Spring(4)——面向切面编程(AOP模块)

    Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切面编程被广泛使用. AOP 即 Aspect Orien ...