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只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的

log4j2相关配置说明以及${sys:catalina.home}应用

${sys:catalina.home} 等价于 System.getProperty("catalina.home") 就是Tomcat的根目录:  C:\apache-tomcat-7.0.77 <PatternLayout pattern="%d{yyyy-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n" /> 2017-08-10

android应用中res目录说明

Android应用的res目录是一个特殊的项目,该项目里存放了Android应用所用的全部资源,包括图片、字符串、颜色、尺寸、样式等,类似于web开发中的public目录,js、css、image、style。。。。 Android按照约定,将不同的资源放在不同的文件夹中,这样可以方便的让AAPT(即Android Asset Packaging Tool , 在SDK的build-tools目

Adblock Plus官方规则Easylist China说明与反馈贴(2015.12.15)

-------------------------------特别说明--------------------------------------- 视频广告问题:因Adblock Plus的局限,存在以下现象,优酷、搜狐、17173黑屏并倒数;乐视、爱奇艺播放广告。因为这些视频网站的Flash播放器被植入了检测代码,而Adblock Plus无法修改播放器。 如需同时使用ads

列举你能想到的UNIX信号,并说明信号用途

信号是一种软中断,是一种处理异步事件的方法。一般来说,操作系统都支持许多信号。尤其是UNIX,比较重要应用程序一般都会处理信号。 UNIX定义了许多信号,比如SIGINT表示中断字符信号,也就是Ctrl+C的信号,SIGBUS表示硬件故障的信号;SIGCHLD表示子进程状态改变信号;SIGKILL表示终止程序运行的信号,等等。信号量编程是UNIX下非常重要的一种技术。 Unix信号量也可以

VS Code 调试go程序的相关配置说明

用 VS code 调试Go程序需要在.vscode/launch.json文件中增加如下配置:  // launch.json{// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information,

Unity Adressables 使用说明(一)概述

使用 Adressables 组织管理 Asset Addressables 包基于 Unity 的 AssetBundles 系统,并提供了一个用户界面来管理您的 AssetBundles。当您使一个资源可寻址(Addressable)时,您可以使用该资源的地址从任何地方加载它。无论资源是在本地应用程序中可用还是存储在远程内容分发网络上,Addressable 系统都会定位并返回该资源。 您

【机器人工具箱Robotics Toolbox开发笔记(二十)】机器人工具箱SerialLink I类函数参数说明

机器人工具箱中的SerialLink表示串联机器人型机器人的具体类。该类使用D-H参数描述,每个关节一组。SerialLink I类包含的参数如表1所示。 表1 SerialLink I类参数 参  数 意    义 参  数 意    义 plot 显示机器人的图形表示 jacobn 工具坐标系中的雅可比矩阵 plot3D 显示机器人3D图形模型 Jacob_dot

context:component-scan使用说明!

<!-- 使用annotation 自动注册bean, 并保证@Required、@Autowired的属性被注入 --> <context:component-scan base-package="com.yuanls"/> 在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controll