gulp及gulp说明

2024-09-02 14:38
文章标签 说明 gulp

本文主要是介绍gulp及gulp说明,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用gulp编译构建步骤

1.安装gulp

  npm install --global gulp

2.在项目根目录创建依赖

 npm install --save-dev gulp

3.在项目根目录创建一个gulpfile.js,基本结构如下:

var gulp = require('gulp');gulp.task('default', function() {// 将你的默认的任务代码放在这
});

4.创建package.json


5.运行,gulp


实例,编译构建 less

a.在gulpfile.js中定义好依赖的插件

b.创建gulp任务

我们在命令窗口中敲击“gulp”后运行“default”,这个任务里面只做了一件事就是执行“develop”任务,【“clean”】表示运行default的前提是clean任务执行完毕

c.现在我们看看develop是如何编译和构建less的

在develop任务里我们首先运行了“build-less”和“concat”任务

先看看“build-less”任务 编译.less

这段代码的意思是,gulp利用gulp-less插件把less目录下的所有.less文件都编译成了对应的css文件,并指定了它们生成在css目录下

d.之后再看看“concat”任务做了哪些事情?

从代码看出,concat任务是依赖于“build-less”执行完毕之后执行,这段代码的意思是 gulp利用了合并插件和压缩插件先把css目录下的所有.css文件合并并取名为ytm.min.css,和并后再压缩,并指定了生成在api路径下

e.所以只要我们在页面上引入  api/ytm.min.css就可以了


那么当我们修改了某一个.less文件后,gulp是怎么自动编译的呢?看c中的develop任务,我们除了执行“build-less”和“concat”外还执行了监听,

gulp.watch("less/*.less",["build-less"]);
gulp.watch("css/*.css",["concat"]);
这两段代码的意思是

     1)当less目录下的任何一个.less发生了变化,就会执行 “build-less”任务

     2)当css 目录下任何.css变化,就会执行“concat”任务

这样就保证了,只要.less变化了.css就会变化,css变化了ytm.min.css就会变化,这样刷新页面的时候样式就变了


这些是基本的操作,可以根据自己的项目自己定义如何监听,监听那些文件的变化,gulp对js的构建压缩合并也是这个道理,仅供参考



这篇关于gulp及gulp说明的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1130244

相关文章

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

Maven中的profiles使用及说明

《Maven中的profiles使用及说明》:本文主要介绍Maven中的profiles使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录主要用途定义 Profiles示例:多环境配置激活 Profiles示例:资源过滤示例:依赖管理总结Maven 中的

Before和BeforeClass的区别及说明

《Before和BeforeClass的区别及说明》:本文主要介绍Before和BeforeClass的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Before和BeforeClass的区别一个简单的例子当运行这个测试类时总结Before和Befor

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

Spring中管理bean对象的方式(专业级说明)

《Spring中管理bean对象的方式(专业级说明)》在Spring框架中,Bean的管理是核心功能,主要通过IoC(控制反转)容器实现,下面给大家介绍Spring中管理bean对象的方式,感兴趣的朋... 目录1.Bean的声明与注册1.1 基于XML配置1.2 基于注解(主流方式)1.3 基于Java

idea报错java: 非法字符: ‘\ufeff‘的解决步骤以及说明

《idea报错java:非法字符:‘ufeff‘的解决步骤以及说明》:本文主要介绍idea报错java:非法字符:ufeff的解决步骤以及说明,文章详细解释了为什么在Java中会出现uf... 目录BOM是什么?1. BOM的作用2. 为什么会出现 \ufeff 错误?3. 如何解决 \ufeff 问题?最