前端构建工具之gulp的语法教程

前言

上一篇说了下gulp的环境搭建以及配置，这一篇说说gulp的语法。

语法说来其实很简单，主要有以下4种：


gulp四种语法

现在我们把src下面的index.html文件copy到发布文件夹dist下：


复制单个文件

webstorm下运行

.

点击运行

如此，便有：


dist文件夹下更新

复制多个文件

复制到某个特定的文件夹下

每次运行之前都需要更新一下

最终

复制指定文件

排除某个文件

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • gulp教程_从入门到项目中快速上手使用方法

    gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令: npm install gulp -g npm install gulp --save-dev 初始化项目package.json的配置:n

  • 前端构建工具之gulp的语法教程

    前端构建工具之gulp的语法教程

    前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家

  • 前端构建工具之gulp的配置与搭建详解

    前端构建工具之gulp的配置与搭建详解

    前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

  • 详解前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次

  • JavaScript前端构建工具原理的理解

    目录 前言 构建工具的前世今生 YUI Tool + Ant Grunt / Gulp Webpack / Rollup / Parcel Vite / Esbuild js 模块化的发展史和构建工具的变化 青铜时代 白银时代 黄金时代 结束语 前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享.在分享的准备过程中,为了能让大家更好的理解 webpack,特意对市面上以前和现在流行的构建工具做了一个梳理总结.在整理和分享的过程中,获益匪浅,对前端构建工具有了新的认识.在这里,将

  • Ruby中任务构建工具rake的入门学习教程

    Rake简介 Rake的意思是Ruby Make,一个用ruby开发的代码构建工具. 但是,为什么Ruby需要Rake? 按理说Ruby代码无需编译,应该不需要Rake才对呀?原来,Rake另有妙用,即把Rake当做一个任务管理工具来使用...这样做有两个好处: 1.以任务的方式创建和运行脚本 当然,你可以用脚本来创建每一个你希望自动运行的任务.但是,对于大型的应用来说,你几乎总是需要为数据库迁移(比如Rails中db:migrate任务).清空缓存.或者代码维护等等编写脚本.对于每一项任务,你

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • 详解前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件

  • 基于Bootstrap和jQuery构建前端分页工具实例代码

    基于Bootstrap和jQuery构建前端分页工具实例代码

    前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

  • Java的项目构建工具Maven的配置和使用教程

    Java的项目构建工具Maven的配置和使用教程

    一.Maven是什么 Maven是一个用java开发的项目构建工具, 它能使项目构建过程中的编译.测试.发布.文档自动化, 大大减轻了程序员部署负担. 二.安装Maven 安装maven非常简单,访问Maven官方页下载即可:http://maven.apache.org/download.cgi 下载完后配置M2_HOME环境变量, 然后终端运行mvn --version, 看到正确的输出提示,Maven就安装完成了. 三.Maven基本概念 Maven的核心思想是POM, 即Project

  • 前端构建 Less入门(CSS预处理器)

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码. 一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT) 众多CSS预处理

随机推荐