gulp的安装和配置详解
gulp的安装和配置详解
1.安装node.js
先下载一个node.js安装包。
下载完成后双击即可。
打开cmd,命令行输入node -v
,回车输出nodejs版本号,表示安装成功。
命令行输入npm -v
,回车输出npm版本号,表示安装成功(nodejs集成了npm)。
由于npm不稳定,下载速度慢,建议使用淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org
,命令行输入cnpm -v
,回车输出cnpm版本号,表示安装成功。以后安装就使用cnpm命令。
2.安装gulp
命令行输入cnpm install gulp -g
,等待安装,输入gulp -v
回车输出gulp版本号,表示安装成功。
3.生成package.json文件
在本地新建一个文件夹,命令行切换到当前文件夹,我是在D盘下新建一个名为gulptest的文件夹。
命令行输入cnpm init
,回车回车回车,生成package.json文件,内容如下:
4.本地安装gulp以及我们需要gulp的插件
现在开始步入正轨,本地安装gulp以及我们需要gulp的插件:
4.1本地安装gulp
命令行输入cnpm install gulp --save-dev
安装完成后我们可以查看package.json的变化
package.json文件多出了
"devDependencies": {"gulp": "^3.9.1"}
"gulp": "^3.9.1"就是我们刚本地安装的gulp及版本号
可能有的人会问:为什么gulp安装了两次?
答:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
继续安装我们需要gulp的插件吧!
cnpm install gulp-less gulp-watch gulp-concat gulp-minify-css --save-dev
安装完成后我们可以查看package.json的变化,又多出了几个插件,暂时先安装这几个gulp插件。
5.配置gulpfile.js文件
在项目根目录下创建gulpfile.js文件,记住必须名字必须是gulpfile。
- gulp-less 编译less
将gulpfile.js配置成如下图,再在命令行输入gulp即可编译less文件。
- gulp-watch 自动编译less(监听事件)
编译less生成css文件算是完成了,但每次修改less之后都要手动执行一遍gulp命令,很明显这是不科学的,于是需要一个监听事件的插件,那就是gulp-watch,配置如下图,命令行执行gulp-watch,当less发生改变时,一按下保存将自动执行gulp-watch命令进行编译。我们也可以将testWatch任务放到默认任务里执行gulp.task("default",["testLess","testWatch"]);
命令行执行gulp
即可。
但当less文件出现语法错误的时候,我们习惯性的按下保存或是编译器带有自动保存功能时,watch可能会中断,再次编译时需要我们再次输入命令。解决的办法是:引入gulp-plumber
模块(本地已安装直接引入即可,如未安装需cnpm install gulp-plumber --save-dev
安装到当前项目下),这样就能处理出现异常而且不终止watch事件。
到这里我们已经完成了less的自动编译,当我们想在编码时查看出现了什么异常而又不想每次出现异常就去查看命令时,我们可以用到gulp-notify
。先是安装,引入,再在plumber()
括号内加入{errorHandler: notify.onError('Error: <%= error.message %>')}
,当出现异常时屏幕右下角就会弹出一个异常信息的窗口。
- 合并css文件
在工作中,我们可能会编译出多个css文件,这就需要我们进行合并处理。gulp-concat
可以帮我们做这件事,在gulpfile引入gulp-concat
(确保已安装);
less()执行完将编译后的css文件进行合并,重新命名为stylesheet.css,再将其输出到css文件夹下。
我们也许需要进行压缩处理,并重命名为-min.,引入gulp-rename
和gulp-minify-css
(确保已安装);
这时会输出两个多输出一个-min的文件。
less自动编译css已经完成了。
gulp的安装和配置详解相关推荐
- Nagios远程监控软件的安装与配置详解
Nagios远程监控软件的安装与配置详解 作者:redhat_hu Nagios是一款功能强大的网络监视工具,它可以有效的监控windows.linux.unix主机状态以及路由器交换机的网络设置,打 ...
- Julia的安装与配置详解(包含在Ubuntu 18.04和Windows 10系统上Julia的安装)
Julia的安装与配置详解((包含在Ubuntu 18.04和Windows 10系统上Julia的安装) Julia的安装 使用二进制文件安装Julia 在Ubuntu上安装Julia 在Windo ...
- node.js卸载、安装、配置详解
node.js卸载.安装.配置详解 一. node.js卸载 二.下载安装 2.1 下载 2.2 安装 2.2.1 选择msi安装 2.2.2 选择zip安装 三.配置 3.1 环境变量配置 3.2 ...
- Gradle安装和配置详解
Gradle安装和配置详解 gradle是基于Apache Ant和Apache Maven概念的项目自动化构建开源工具,也提供了很多第三方插件.在Java Web项目中通常会用到 java.war. ...
- keepalived介绍、安装及配置详解
文章目录 keepalived简介 keeplived和LVS关系 VRRP工作原理 keepalived体系结构及工作原理 keepalived安装 keepalived配置详解 keepalive ...
- Linux中Nginx安装与配置详解及常见问题
3 Nginx安装 3.1 安装前的准备 1)准备 pcre-8.12.tar.gz.该文件为正则表达式库.让nginx支持rewrite需要安装这个库. 2) 准备 nginx-1. ...
- Tomcat安装及配置详解
转载:http://www.ttlsa.com/tomcat/tomcat-install-and-configure/ 一,Tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用 ...
- 01 Redis安装、配置详解、数据备份与恢复
缓存简介 简介 缓存是为了调节速度不一致的两个或者多个不同的物质的速度,在中间对速度访问较快的一方起到一个加速访问速度较慢的一方的作用,比如cpu的一级,二级缓存是为了保存cpu最近经常访问的数据,内 ...
- uWSGI的安装及配置详解
uWSGI是一个Python Web服务器,它实现了WSGI协议.uwsgi.http等协议,常在部署Django或Flask开发的Python Web项目时使用,作为连接Nginx与应用程序之间的桥 ...
最新文章
- 有个程序员老公有多爽???
- 三、openstack安装之Glance篇
- ISME:菌根真菌菌丝分泌物中的果糖作为信号激发解磷细菌活化植酸
- AngularDart Material Design 步进器
- 计算机斐波那流程图,循环结构——斐波那契数列.DOC
- jQuery AJAX实现调用页面后台方法
- win8.1 安装kb2999226 一直提示 搜索更新
- scsi服务器硬盘如何用,实战:不重启服务器添加scsi硬盘
- 计算机网络技术基础第二章答案,计算机网络技术基础各章节综合练习题及答案...
- C语言数字图像处理---1.3 图像直方图
- Swift 阳历转农历,农历转公历
- C# loadlibrary C++dll 句柄为空,dll加载失败
- Beats: 使用 Filebeat 进行日志结构化 - Python
- 总谐波失真80_如何将总谐波失真(THD)控制着10%以下?
- SLB负载均衡和DNS协议
- 图文解说 linux 安装 nginx
- 翻译:Firefox for Pentester: Privacy and Protection Configurations
- windos10本地安装git工具并使用
- 15分钟上手vue3.0(小结)
- mongo3.0.9库命名的一个S级bug