gulp填坑记(一)
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填坑记(一)的更多相关文章
- gulp填坑记(二)——gulp多张图片自动合成雪碧图
为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...
- UiAutomator2.0升级填坑记
UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...
- Android项目开发填坑记-Fragment的onBackPressed
Github版 CSDN版 知识背景 Fragment在当前的Android开发中,有两种引用方式,一个是 Android 3.0 时加入的,一个是supportV4包中的.这里简称为Fragment ...
- Android项目开发填坑记-Fragment的onAttach
背景 现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写 ...
- Android项目开发填坑记-so文件引发的攻坚战
故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...
- minikube windows hyperx填坑记
minikube windows hyperx填坑记 安装了一天半,还是没行,先放弃 开始 minikube start --vm-driver=hyperv --hyperv-virtual-swi ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- Java web 开发填坑记 2 -如何正确的创建一个Java Web 项目
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72566261 本文出自[赵彦军的博客] Java web 开发填坑记 1-如何正确 ...
- Appium+python自动化(十三)- 输入中文 - 一次填坑记(超详解)
简介 无论你在哪里,在做什么都会遇到很多坑,这些坑有些事别人挖的,有些是自己挖的.别人挖的叫坑人,自己挖的叫自杀,儿子挖的叫坑爹.因此在做app自动化道路上也不会是一帆风顺的,你会踩很多坑,这些坑和你 ...
随机推荐
- Python内置函数(53)——setattr
英文文档: setattr(object, name, value) This is the counterpart of getattr(). The arguments are an object ...
- 请求方式:request和 get、post、put
angular 的 http 多了 Request, Headers, Response ,这些都是游览器的"新特性" Fetch API. Fetch API 和以前的 xmlh ...
- ABP CORE 框架入门视频教程《电话薄》基于 Asp.NET Core2.0 EF Core
ABP框架简介 ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行 ...
- Django--ORM基本操作
一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pr ...
- jupyter notebook的架构
最近项目需要改写jupyter notebook的内核,由于内功不够,英语过差,读文档真的是心痛,然后各种搜索找到了一篇不错的讲解. 转自:http://blog.just4fun.site/jupy ...
- find()用法
>>> str = '编程改变世界'>>> str.find('编')0>>> str.find('程')1>>> str.fi ...
- Canvas绘制五角星
from tkinter import * import math as m root = Tk() w = Canvas(root, width=200, height=100, backgroun ...
- Ubuntu+apt-get update时的源
源是通过 /etc/apt/sources.list # file /etc/apt/sources.list.d # dir 来确定的, 只要将其中的相应文件/相应行删除了, 在apt-get up ...
- eclipse下如何使用Hibernate反转工程生与数据库对应的实体类和映射文件(以MySQL为例)
首先需要为eclipse添加对Hibernate的支持(也就是下载的Hibernate中的jar包),下载方法另查,这里不多做阐述. 想要使用反转工程,首先要下载Hibernate反转工程的插件Jbo ...
- Spring(4)——面向切面编程(AOP模块)
Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切面编程被广泛使用. AOP 即 Aspect Orien ...