gulp基本用法
嗨,小伙伴们,大家周五好,又到了一周中最最最期待的周五啦啦~~~
这几天一直在研究gulp的使用方法,今天抽时间来整理一下基本步骤。
gulp 的使用流程: 安装nodejs ->安装git(方便调出命令窗口,可选) -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1.gulp是基于node开发的工具,所以在使用gulp前,必须先安装node.js,安装步骤很简单,从网上下载一个node安装包,一步一步进行安装即可,我的安装包是node-v4.4.4-x64.msi版本。
2.为了调用命令窗口方便,我们在本地安装git,git的安装也非常简单哦,从网上下载一个git安装包,一步一步进行安装即可,我的安装包是Git-2.7.2-64-bit_setup.exe。
3.接下来是全局安装gulp,全局安装的意思,就是整个电脑里,有gulp的环境,全局安装是在命令窗口安装的,接下来,随便在桌面右击,点击gitBash 后,输入命令 npm install gulp然后回车,进行全局安装gulp。
。
4 开始创建项目,
4.1首先创建一个英文的文件夹,比如project文件夹,打开文件夹,在文件夹的空白处右击,出现gitBash——>点击gitBash后,调出命令窗口,输入命名:npm init 回车,这时候,细心的你们会发现,project文件夹里出现一个package.json文件。
4.2然后再在项目中安装gulp,一般情况,有人反映不用局部安装,不过,个人建议,局部安装gulp还是比较靠谱些,哈哈。在命令窗口中,输入命令:npm install gulp --save-dev回车
此时,你们会发现,项目文件夹里,又多出来一个node_modules文件夹,接下来,所有的插件安装,都会安装在node_modules文件夹里面。安装插件都在命令中执行,比如安装replace插件,输入命令:npm install gulp-replace回车,。 比如安装saas : npm install gulp-ruby-sass --save-dev。
4.3在项目根目录下,创建src文件夹,src文件夹是放入html页面,创建dist文件夹,dist文件夹用来盛放自动生成后的html页面。
4.4在项目根目录下创建gulpfile.js文件,以下所有js都将卸载gulpfile.js文件里。
4.5命令 var gulp = require("gulp"); 获取gulp模块,获取其他模块方法同样。比如 var replace = require("gulp-replace")获取替换模块;
4.6gulp的几种方法:
var gulp = require("gulp");
var replace = require("gulp-replace");
gulp.task("lyx",function(){
gulp.src("./src/html/**/*.html")
.pipe(replace(/<title>.*?<\/title>/gi,"<title>刘雨熙网站</title>"))
.pipe(replace(/tppabs\s?=\s?['"].*?["']/gi,""))
.pipe(gulp.dest("./dist/html/"));
});
5.开始运行gulp项目,输入命令:gulp lyx ,其中lyx就是上一列中创建的任务名称。
6.转移、复制项目时,只需把gulpfile.js 、package.json、和项目文件复制过去即可,无需复制node_modules文件夹,复制到目标文件夹后,右击根目录文件夹,启用命令工具,如git,输入命令:npm install ,会自动根据package.json中的安装目录逐一安装node_modules文件夹内的插件。
好了,到此,我想大家应该对gulp有个大概的了解了,以上就是我这几天研究总结出来的东西,希望对大家有所帮助。
gulp基本用法的更多相关文章
- yarn依赖管理工具,和fis3构建工具 gulp详细用法
看视频所了解到的,正在进行摸索. 参考:https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒,唯一有一点,页面随时刷新的目前还没实现,不知 ...
- gulp的基本用法
这几天简单的研究了一下gulp的用法,gulp对于初学者来说还是很友好的. 官方给出gulp的优点如下: 1.通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理. 2.Gulp 严格 ...
- 一篇迟到的gulp文章
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
- 一篇迟到的gulp文章,代码合并压缩,less编译
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
- Gulp插件笔记
初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...
- nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法
简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...
- gulp——用自动化构建工具增强你的工作流程
想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 ...
- Animate.css 教程
animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中.不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果. 基本用法 引入CSS文件 这个对你来 ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- Codeforces Round #384 (Div. 2) 解题报告
这场CF水题都非常的水,D题如果对树.DFS相关比较熟练的话也不难.比赛时前三题很快就过了,可是因为毕竟经验还是太少,D题就卡住了.比赛之后A题还因为没理解对题意fst了--(为什么这次就没人来hac ...
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
- 异步函数封装请确保异步性(Javascript需要养成的良好习惯)
背景假设: 你有许多的配置信息存放在服务器上,因为配置太多,不希望每次都把所有的配置信息都写到前端,希望能需要用的时候再获取就好了. 因为Javascript单线程运行,你不希望堵塞ui渲染于是你专门 ...
- powershell中使用超大内存对象
powershell中使用超大内存对象 简单介绍了powershell中超大内存对象的用途,开启powershell超大内存对象的办法. powershell 传教士 原创文章 2016-12-31 ...
- 学习asp.net比较完整的流程[转]
如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.NE ...
- 软件测试第六周学习笔记之“Win8 APP应用程序的白盒测试”
这周的学习笔记我想写点自己关于实验中碰到的问题和感想. 因为这次做的是白盒测试,所以我决定去测试一下上回测试的app的功能函数. 这次我用的是单元测试项目来做的白盒测试: 创建单元测试的步骤: 1.点 ...
- git clone错误
git clone错误 Initialized empty Git repository in ***/.git/ error: The requested URL returned error: 4 ...
- 应用间共享数据方法(一)---sharepreferce
SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. SharedPreferences保存数据,其背后是用xml文件存放数据,文件存放在/data/data/ ...
- 触发Full GC执行的情况
除直接调用System.gc外,触发Full GC执行的情况有如下四种. 1. 旧生代空间不足 旧生代空间只有在新生代对象转入及创建为大对象.大数组时才会出现不足的现象,当执行Full GC后空间仍然 ...
- 解决:j-link V8下载器灯不亮,无法正常烧写固件
昨天j-link V8下载仿真F4正常,下午下载仿真F1后吃了个饭,然后它的灯就不亮了...按照这个例程弄了好几遍都不行,http://www.cr173.com/soft/98542.html,卡在 ...