首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【工具】gulp自动化构建工具入门教程

; 命令:node -v 2.安装 npm ,使用 npm 可以方便的安装 gulp; 然后再 cmd 命令行工具你也可以检测 npm 的版本以此判断 node 是否安装成功; 3.根据你的项目路径...,通过命令行工具先进入到项目的根目录下,例如: D:\wampv\wamp\www\getgulp 这是我项目的路径,那么就是用 cd 命令进入到 getgulp 目录下; 图示: 此时,我们已经进入到...的文件 gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件,所有的对项目文件的自动化操作将在这里面进行; 如图: 然后根目录下新建一个gulp文件夹,并在gulp...gulp插件 如图: 为了捕获操作的异常,我们就需要先安装两个插件gulp-notify和gulp-plumber,然后gulpfile.js文件require它们: 6.接下来,我们来写...命令行工具我们终于要使用到gulp命令啦! 7.使用gulp 命令进行构建 于是,我们build文件夹下将看到前面对less文件的编译输出结果: OK ,关于对less的操作就介绍这些。

24330
您找到你想要的搜索结果了吗?
是的
没有找到

从零开始构建你的 Gulp

,下图是我们整个项目的目录结构,文章的接下来部分,将会给大家详细讲解 图片 文件结构 我们先来简单介绍下我们的文件目录结构,node_modules 文件夹下为依赖包,gulp 文件夹下为任务文件,src...文件夹下为项目的引用文件,该目录下的文件均为测试文件,各位童鞋可根据自身需求进行修改替换,build 文件夹为 gulp 过后的生产文件 因为 package.json 文件里所罗列的依赖包太多,在这里就不再具体展示...,童鞋们可先自行下载 package.json 文件,运行 npm install 命令进行项目依赖包的下载,亦可通过下载整个项目进行学习,需要注意的是,插件的更新或是依赖包的缺少都可能导致项目无法正常运行...帮助我们审查出重复的 CSS 样式、不规范的代码、无效颜色值、无意义的浏览器前缀以及我们所配置的一些审查规则,我们可以根据自身项目的需求来设置不同的规则 图片 rules 使用 0, 1, 2 来代表规则启用状态不同...Stream,我们之前的文章有提到过,Gulp 使用的 Stream 并不是普通的 Node Stream,而是一种名为 Vinyl File Object Stream 的虚拟文件格式,主要包含了路径

1K40

基于gulp的前端自动化方案

webpack已经成为了前端打包构建的主流,但是一些`老古董`的项目还是存在的,也有优化的必要,正好公司的老项目需要优化,不多说拿gulp实践一下。...实践 创建项目目录 首先初始化npm依赖项与基本信息,使用命令npm init一直回车,生成package.json文件,也可以直接去上边github仓库目录下载。...你的项目目录关系到你的gulp脚本里的任务路径,我脚本里写的是匹配所有的目录和文件。我简单举个例子:这里js/common里的js文件也会被处理。如果只想处理特定目录的文件,请修改任务里的路径。...PATHS。...default', ['deploy'], function (e) { console.log("[complete] Please continue to operate"); }) 部署 终端输入

1.1K60

Visual Studio自定义项目模版(图解版)

我们使用VS新建项目时,一般都需要选择一个项目模板,一个好的项目模板可以帮我们节省很多项目业务上的重复工作,但如何创造一个独属于自己的项目模板呢?...点击完成VS会把项目模板压缩为.zip文件保存在相应路径可以以下两个文件夹找到.zip文件1.2.这时打开Visual Studio就可以搜索到新创的项目模板了到这一步,我们的项目模板就可以使用了,下面是一些锦上添花的操作...3.给项目模板添加语言、平台和项目类型等标签,方便搜索用vs或者记事本打开MyTemplate.vstemplate附网上参考图我们需要在TemplateData标签里添加上项目使用语言、平台、项目类型的信息...以下列表是 Visual Studio 可用的内置标签,对应的值显示括号。...这样,每次创建新项目时,你只需选择并修改你的自定义模板,不是从头开始创建项目。附:可供任何模板使用的保留的模板参数:我正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!

68975

备份方式和Linux基础

例如, Win10系统桌面上新建一个 test文件夹,当再为桌面创建一个名为 Test的文件夹时, 系统会提示文件夹命名冲突; Linux 是一个非常严谨的操作系统,严格区分大小写。...3)输入如下命令:两个文件 Linux系统是一样的,说明 Linux不是通过扩展名来区分文件类型。...d、网页文件:网页文件一般使用 ".php" 等结尾,不过这是网页服务器的要求,不是 Linux 的要求。...windows是文件的,Linux下也是文件。windows不是文件的,Linux系统也是文件。...eg:终端输入ls命令,列出目前工作目录所含的文件及子目录,查看文件的颜色。显示黑色的,即为普通文件。显示蓝色的,即为文件夹

31221

构建CUDA项目二周目翻车记录

继上次的翻车之后,我算是有了些经验,同时机器上也装了些共通的依赖库,由于上项目最后的错误解决不了就放那里了,开始搞一下这个项目,这和上一个项目的目的是一样的,都是借助GPU进行加速计算的可视化工具,但此项目是用...netbeans开发的,文件结构上要比上一个复杂的多,而且采用的是CMakeList.txt的方式,应该算比较正式的C++项目了吧。...题外话:nvcc和nvidia-smi显示的cuda版本不一样 这个问题最终被确定和程序运行的错误无关,但碰巧发现了,总觉得不一样怪怪的,不一样的原因其实很简单,可以理解为一个版本是程序用的软件运行的...Cuda版本,另一个是开发用的Cuda版本。...构建这个项目,首先需要新建个cmake文件夹,然后进入该文件夹内,执行cmake命令,结果报错了,找不到Cuda(found 9.1),隐约感到这不是简单的路径问题,后来得到证实,这是在编译时没有指定版本导致的

82410

前端CLI脚手架思路解析并从0到1搭建

为什么要自己搞脚手架 实际的开发过程,我们经常用别人开发的脚手架,以节约搭建项目的时间。但是,当npm没有自己中意的脚手架时,我们不得不自己动手,此时学会开发前端CLI脚手架的技能就显得非常重要。...入门需知 下面我们以创建js插件项目的脚手架来加深我们对前端脚手架的认知。...项目里打开终端,先把需要的依赖装上,后续可以直接调用。...为了能够记录切换后的镜像链接,我们需要在本地创建 config.json 文件来保存相关信息,当然不是由我们手动创建,而是让脚手架来创建,整个逻辑过程如下: ?...初始化项目的命令是 js-plugin-cli init 项目名 ,所以我们需要把 项目名 作为文件夹的名称,也是项目内 package.json 的 name 名称(只能小写,所以需要转换)。

1.4K31

Linux笔记(1)| 常用命令

我们选择Windows系统安装VMware虚拟机,然后虚拟机当中安装Ubuntu系统。Linux有命令行模式和GUI模式,要想进入命令行模式,右键进入终端即可。...相对路径和绝对路径:相对路径就算从当前路径出发,到达某个地方。绝对路径是从根目录出发,到达某个地方,Linux根目录是一个/,所以以/开头的就是绝对路径。...四种方式都是可以的 直接使用ls就是把当前文件夹下的文件显示出来,但是不包括隐藏文件,显示隐藏文件需要在后面加上 –a,如果需要看到详细信息需要加上 –l ?...,rm -r可以删除空文件夹和非空文件夹 (11) ln(link,连接文件) 基础:windows快捷方式,实际上快捷方式和它指向的文件是独立的两个文件,两个都占硬盘空间,只不过用户访问快捷方式时...硬连接:ln 源文件名 连接文件名 硬连接实际上和源文件硬盘是同一个东西,效果类似于硬盘上的一个文件,文件系统上,我们看来有好多个文件一样。

85960

SpringBoot系列(八)文件上传的正确姿势

1.项目搭建与配置  我们直接创建一个包含web依赖的项目就好了。然后需要在配置文件配置文件上传的一些设置。这里使用yml文件作为配置文件,如果不懂语法的,请移步前面的系列三,里面有详细解释。..., // 这时候我们就需要在项目相对路径这里加上项目的名称demo-upload String newFilePath = filePath+"\\demo-upload...接下来获取当前项目运行的路径,由于我是创建的多模块项目,所以这个获取的路径需要再加上项目名称,后面加上我们需要上传的文件存储的位置,一般resources文件下面。...然后判断这个存储文件的文件夹是否存在,如果不存在就需要创建一个文件。然后利用字节流,将数据写到文件,返回可访问的路径。  ...将文件上传之后,那个返回的路径应该是不能直接访问到图片的,会显示404,我们需可以添加以下配置。

77440

React 项目路径添加指定的访问前缀 - SPA

---- 前言 之前我们讨论了怎么 Angular 项目路径添加指定的访问前缀,该项目针对 SPA 应用;当然,我们也讨论了 Next 项目路径添加指定的访问前缀,该项目使用 React 框架完成的...react 版本 ^18.2.0 我们将使用到其默认的命令行进行项目打包: "build": "react-scripts build" 但是,我们更改下,打包到自定义的文件夹,名为 jimmy:..."build": "react-scripts build && mv build jimmy" 这种打包的方法,能够方便笔者运行多个命令行输出不同的项目不是单一更改配置。...好了,我们先对项目进行更改~ 更改项目开发前缀 项目中,我们使用的是 history 模式,所以,项目的路由方式如下: import { BrowserRouter as Router, Route,...添加 homepage 项目的 package.json 文件添加 homepage 字段,这里我们应该设置其值为 /jimmy/: { "homepage": "/jimmy/" } 2.

2K10

SpringBoot----Web开发第二部分---CRUD案例实现

专门用来处理 URL 链接地址的,会自动帮我们加上项目名的访问路径 国际化 步骤 1.编写国际化配置文件,抽取页面需要显示的国际化消息 2.SpringBoot自动配置好了管理国际化资源文件的组件...域中就会存在已经登录的凭证,如果此时回退到登录页面,那么就可以不登录直接访问对应网页,这个的解决方法如下: 使用下面这个解决方法的前提是拦截器只拦截登录页面,不是所有请求,不然当登录成功后,点击当前页面的任何请求...=/dhy 页面查看源码,看是否帮我们自动增添了项目名访问路径: ---- 国际化 步骤 1.编写国际化配置文件,抽取页面需要显示的国际化消息 每个国际化配置资源文件分别有如下五个属性值...* 重定向 redirect:重定向的路径 * /hello.jsp:代表就是从当前项目下开始;SpringMVC中会为路径自动的拼接上项目名 * *...* 原生的Servlet重定向/路径需要加上项目名才能成功, * 重定向的url路径是要发给浏览器让浏览器按照该url访问服务器的,浏 * 览器解析/ 只到站点

1.5K30

靠!安装了macOS Catalina(10.15.4)后,文件系统都乱套了

到底发生了什么事 不过安装完后,发生了一件不可思议的事,进入硬盘,发现硬盘里只有如下5个目录。my god,我的其他文件夹哪里去了?难道升级时给我格式化了? ?...原来从Catalina版本开始,Apple为了实现自己更安全的目的,将硬盘分成了两个卷(以前是一个卷),一个是系统卷,一个是数据卷。从下图所示的磁盘工具中就可以看出这一点。 ?...注意:如果只在数据卷中移动数据,速度非常快,因为并不是真的移动的数据,只是改变了目录的位置。...终端执行sudo mount -uw / 命令将系统卷根目录设为可写状态; 经过这3步,系统卷根目录已经可写了,但仍然需要使用sudo命令。...由于我要使用go语言开发相关项目,于是试一试go语言是否可以编译通过,结果.....

2.1K71

【群晖】Docker Compose部署 Emby Server

媒体库我是单独创建了一个存储池,存储类型是 JBOD 便于以后可以合并新增硬盘自动扩容不需要再去修改 Emby 等相关服务路径了。我的媒体库创建路径是 /volume2/video 。...部署Emby打开 Container Manager 套件,选择项目,选择新建项目名称:随便写,自定义内容路径:选择 设置路径 里面选择前面创建的 /volume1/docker/emby 文件夹来源:...后面是映射到容器显示的文件路径,建议前后保持一致ports:端口映射,因为我们采用桥接模式,所以做个端口映射才可以外部访问另外3个端口可以不做映射直接本地端口即可如果想要使用 https 方式访问 emby...,建议使用群晖的反向代理统一控制完成配置修改后,点击保存,选择项目构建完成项目构建后, Container Manager 容器 可以看到自动创建的名为 emby-server的容器查看容器日志确认启动成功访问...新增 里面的 通过命令启动 下拉菜单因为 emby 容器并不是基于常规 linux 服务打包的镜像,并没有包含 bash 命令,因此使用 sh 命令,输入命令打开终端/bin/sh查看 hosts 文件内容

8.4K50

【从零学习OpenCV 4】Windows系统安装OpenCV 4

Visual Studio的安装和使用不是本书的重点,读者可以去微软官网下载需要的版本,按照教程完成安装和使用。...图1-8 修改Debug模式为x64 完成空项目的创建之后,正式开始包含路径的配置。依次点击界面上方的【视图】→【其他窗口】→【属性管理器】,右侧会出现“属性管理器”界面,如图1-9所示。...笔者的配置路径如为: H:\opencv4\opencv\build\x64\vc14\lib 需要说明的是,“…\vc14\”指的是Visual Studio 2015使用如果使用的是Visual...打开库目录路径,发现lib文件数目只有两个,如图1-11所示。这两个文件的名字很像,唯一区别就是一个后面含有“d”,另一个没有。不含有的文件是Release模式下使用,配置该模式的时候才使用。...我们在前面创建的main源文件输入代码清单1-1的程序,该程序的主要目的是读取一张图片并显示该图片,代码原理我们会在后面的章节详细介绍。

1.6K20

Laravel运行Gulp任务的利器(一) —— Laravel Elixir简介及入门教程

"gulp": "^3.8.8", "laravel-elixir": "*" } } Node的 npm 包管理器使用 package.json 来安装项目的Node模块依赖。...你可以使用如下命令本地安装这两个包: $ npm install 安装完成之后,你会看到项目根目录下新增了一个 node_modules 文件夹文件夹内包含了我们刚刚安装的 gulp 和 laravel-elixir...该文件,可以看到一个Gulp任务示例: elixir(function(mix) { mix.less('app.less');}); mix.less 任务可以用于编译Less文件,本例该文件名为...你可以通过项目根目录下运行 gulp 命令来执行定义 elixir 方法的任务: $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com...下面这个CoffeeScript语句将会在浏览器显示一个弹出框: alert “Hi I am annoying” 保存该语句到 resources/assets/coffee/test.coffee

2K91

Linux 笔记【适用新手】

递归删除整个文件夹 /home/bbb image.png 使用细节 ​ 强制删除不提示的方法: 带上 -f 参数即可 ​ image.png 3.4.9 cat 指令 ​ cat 查看文件内容,...less 指令显示文件内容时, 并不是一次将整个文件加载之后才显示, 而是根据显示需要加载内容, 对于显示大型文件具有较高的效率。...image.png ​ 案例 2: 显示 2020 年日历 image.png 3.6 搜索查找类 3.6.1 find 指令 ​ find 指令将从指定目录向下递归地遍历其各个子目录, 将满足条件的文件或者目录显示终端...gzip 对文件进行压缩后,捕获保留原来的文件 3.7.2 zip/unzip 指令 ​ zip 用于压缩文件,unzip 用于解压的,这个项目打包发布很有用的 基本用法 zip [选项]XXX.zip...Linux 采用了一种叫“载入” 的处理方法, 它的整个文件系统包含了一整套的文件和目录,且将一个分区和一个目录联系起来。 这时要载入的一个分区将使它的存储空间一个目录下获得。

2K10

linux常见面试题

DOS下,/用作命令参数分隔符,\是目录分隔符 DOS遵循命名文件的约定,即8个字符的文件名后跟一个点,扩展名为3个字符。BASH没有遵循这样的惯例。 11)GNU项目的重要性是什么?...硬链接直接指向磁盘上的物理文件,不指向路径名。这意味着如果重命名或移动原始文件,链接将不会中断,因为链接是针对文件本身的,不是文件所在的路径。 26)Linux下文件名的最大长度是多少?...当你可以打开一个或多个程序时,使用虚拟桌面可以清除桌面。你可以简单地虚拟桌面之间进行随机播放,不是每个程序中保持完整的程序,不是最小化/恢复所有这些程序。...由于Linux区分大小写,因此先前使用的命令可能以与当前格式不同的格式输入。例如,要列出目录的所有文件,应键入命令ls,不是LS。...57)解释如何使用终端创建文件夹? 要创建文件夹,你必须使用命令mkdir。它将是这样的:〜$ mkdir Guru99 58)解释如何使用终端查看文本文件?

2.4K10

大数据开发工程师基本功修炼之史上最全Linux学习笔记(建议)

Linux终端命令格式 目标 01.终端命令格式 1.1 常用Linux命令的基本使用 02.目录(文件夹)常用命令 目标:文件夹的增、删、改、查的命令操作 2.1创建文件夹的命令 2.2删除文件夹的命令...自动补全 相对路径,结对路径 04 其他命令 && 和 || VI编辑器_终端编辑器(重点重点重点) 目标 1 简介 1.1 学习vi的目的 1.2 vi 和 vim 1.2.1 VI 1.2.2 VIM...注意 vi的 文本缓冲区 和 系统的 剪切板 不是同一个 所以在其他软件中使用 Ctrl + C 复制的内容, 不能再 vi 通过 p 命令粘贴 可以 编辑模式 下使用 鼠标右键粘贴 3.7 替换...war : web rar web项目的压缩包 路径 2.1 第一步: 打包 和 解包 **2.2 第二步: 打包压缩 和 解包解压缩 ** 3.实现 3.1 第一步: 打包 和 解包 3.1.1...ps 默认只会显示当前用户通过终端启动的应用程序 ps 选项说明功能 选项含义a显示终端上的所有进程,包括其他用户的进程u显示进程的详细状态x显示没有控制终端的进程 提示: 使用kill命令时

1.2K20

遗传算法可视化项目(7):地图装饰

前天讲了用PyQt5实现数据可视化,也已经基本讲完整个项目了,没有看之前文章或者今天才关注的可以看一下历史消息或者点击这里: 遗传算法可视化项目(1):概述 遗传算法可视化项目(2):获取信息 遗传算法可视化项目...实现数据可视化 然而我的运行结果是有地图的,这个地图不是网上找的,而是我用Python画上去的,画地图首先需要装一下相关库,我之前装的时候pip没用,现在不清楚了,我就讲一下我之前怎么装的啦!...下载好了之后解压到任意文件夹内,我这里就解压到一个名叫map的文件夹,然后我就在map文件夹所在目录新建一个Python文件(我就叫:海南地图.py了),到时候读取map文件夹内的文件代码只需要写成map...(使用相对路径),没有必要写成C:\(...)(使用绝对路径)。接下来就是编写那个py文件了,代码如下: ?...目前为止,遗传算法可视化项目已经全部结束,以后我都会尽量讲解基础知识,但是有项目还是会讲项目的,文章最后附上项目地址:https://github.com/3480430977/DataVisualizationOfGA

50420
领券