前端开发之gulp语法

作者: 巩小白 | 来源:发表于2017-06-10 18:20 被阅读106次

上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法。
语法说来其实很简单,主要有以下5种(更新watch方法):


gulp的五种核心方法

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


复制单个文件
webstorm下运行
点击运行
如此,便有:
dist文件夹下更新
复制多个文件
复制到某个特定的文件夹下
每次运行之前都需要更新一下
最终
复制指定文件
排除某个文件
监视文件

watch语法和其他语法一样,能监视所有文件,也能监视指定文件。这个方法则是你在src文件下修改了某个文件,你只需要运行这个方法,相应的在dist文件也会自动更新。
在src文件下建立images文件,images下存入图片自行测试


添加多个后缀名
执行多个任务
执行多个任务,你在每个任务中都相应的clonsole.log一下,然后在控制台中你会发现执行顺序是先顺序打印子任务依赖项,最后才执行主任务,并且执行时间不一样,都是异步同时在执行,非阻塞的
控制台打印看执行顺序
到此,gulp的语法基本就写完了。gulp他自身的方法就是这么简单。
但是他仅仅就这么简单吗?答案是:NO。
我们前面说过,gulp是基于node开发的,只要是基于node开发的,那么他一定会衍生出许多的依赖小模块。下节开始,我们就开始介绍一些的常用小模块。

相关文章

  • 前端开发之gulp语法

    上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法。语法说来其实很简单,主要有以下5种(更新watc...

  • 前端开发之gulp语法node依赖

    前一节,我们学习了gulp自身5种核心语法。这一节我们说说依赖node的小模块。我们手动删掉src下images下...

  • FIS3前端工程构建工具

    Gulp和Webpack特点对比 Gulp Gulp侧重于前端开发的整个过程的控制管理(像是流水线),Gulp是对...

  • gulp+webpack配置

    gulp+webpack配置 首先介绍一下gulp和webpack gulp gulp是前端开发过程中对代码进行构...

  • gulp 用法大全

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发...

  • webpack和gulp的区别

    Gulp侧重于前端开发的整个过程的控制管理(像是流水线),我们可以通过给gulp配置不通的task(通过Gulp中...

  • 自动化构建

    process.env.NODE_ENV读环境变量 Gulp 优化前端开发流程的工具。基于流,gulp.src使用...

  • 前端开发之gulp插件gulp-end

    这一节,我们说说gulp插件。现在市面上应该有上千种插件,gulp官方提供的不多,其他都是私人写的,我们可以拿过来...

  • gulp 笔记 要点概况

    gulp 是基于 node 实现 Web 前端自动化开发的工具。 gulp 还可以做很多事,例如: 压缩CSS 压...

  • gulp

    gulp解释 GULP 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。GULP 是 基 于 Nod...

网友评论

    本文标题:前端开发之gulp语法

    本文链接:https://www.haomeiwen.com/subject/fgkcqxtx.html