gulp自动化构建工具

1>基础知识

gulp是基于流的自动化构建工具,在gulp中,首先过gulp.src()方法获取要处理的文件流,然后把文件流通过pipe方法导入到gulp插件中最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中,gulp.dest()方法则把流中的内容写入到文件中,以流为媒介它不需要频繁的生成临时文件,这也是使用gulp的一个原因。

2>作用

它能够对网站资源进行优化,还可以提高我们的工作效率,能够自动完成js,css,html,sass,Less,image,coffee等文件的测试,检查,合并,压缩,格式化,浏览器自动刷新,部署文件生成,并监听文件在改动或重复指定的这些步骤。

3>安装

确保正确安装了node环境

1》全局安装gulp

npm install gulp -g

2》局部安装,把目录切换到你的项目中,可以写入package.json文件的依赖上(加--save-dev)

npm install gulp --save-dev

4>globs的匹配规则

* 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾

** 匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。

? 匹配文件路径中的一个字符(不会匹配路径分隔符)

[...] 匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法

!(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的

?(pattern|pattern|pattern)匹配括号中给定的任一模式0次或1次

+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次

*(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次

@(pattern|pattern|pattern) 匹配括号中给定的任一模式1次

5>特点    

1)易于使用: 通过代码优于配置的策略,gulp 让简单的任务简单,复杂的任务可管理。

2)构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

3)易于学习:通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

4)插件高质: gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

6>API

1》src:获取流

注意:这个流里的内容不是原始的文件流,而是一个虚拟文件对象流它储存着原始文件的路径,文件名,内容等信息。

语法:gulp.src(globs,[,options])

globs:文件匹配模式(类似正则表达式),用来匹配文件的路径,当有多个匹配模式时,参数可以为一个数组;参数类型为:String或Array

      options:可选参数,它的参数为

          options.buffer->类型: Boolean 默认值: true。

           如果该项被设置为 false,那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时             候将会很有用。

           注意:插件可能并不会实现对 stream 的支持。

       options.read->类型: Boolean 默认值: true

        如果该项被设置为 false, 那么 file.contents 会返回空值(null),也就是并不会去读取文件。

        options.base->类型: String

       设置输出路径以某个路径的某个组成部分为基础向后拼接。

   在路径为client/js/somedir的目录中,有一个文件叫somefile.js

gulp.src('client/js/**/*.js')//匹配client/js/somedir/somefile.js现在‘base’值为‘client/js’
     .pipe(minify())
     .pipe(gulp.dest('build'));//写入build/somedir/somefile.js,将client/js替换成build
gulp.src('client/js/**/*.js',{base:'client'})
     .pipe(minify())
     .pipe(gulp.dest('build'));//build/js/somedir/somefile.js,将client替换成build

2》dest:写文件

语法:gulp.dest(path[,options])

      path:写文件的路径

      options:可选参数,它的参数为

           options.cwd->类型: String 默认值: process.cwd().

          输出目录的 cwd 参数,只在所给的输出目录是相对路径时候有效。

          options.mode->类型: String 默认值: 0777.

         八进制权限字符,用以定义所有在输出目录中所创建的目录的权限.

3》watch:监听文件

监听文件的变化,当文件变化后,可以应用它来执行相应的任务,例如文件压缩

语法:gulp.wacth(glob[,opts],tasks)

                 glob:要监视的文件匹配模式

                 opts:一个可选的配置对象

                 tasks:文件变化后要执行的任务,为一个数组

 4》task:定义任务

语法:gulp.task(name[,deps],fn)

               name:任务名

               deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的

任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数;

               fn:任务函数,可选

控制任务的执行顺序,可以通过任务依赖来实现。

例如我想要执行one,two,three这三个任务,那我们就可以定义一个空的任务,然后把那三个任务当做这个空的任务的依赖就行了:

//只要执行default任务,就相当于把one,two,three这三个任务执行了

gulp.task('default',['one','two','three']);

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Gulp是一种前端自动化工具,它可以帮助前端开发人员自动完成一些重复性工作,例如压缩CSS和JavaScript文件、自动刷新浏览器、合并文件等。 使用Gulp需要先安装Node.js和npm,然后使用npm安装Gulp。安装完成后,可以在项目的根目录下创建一个名为gulpfile.js的文件,该文件中定义了Gulp要执行的任务和任务的具体操作。 在gulpfile.js中,可以使用Gulp提供的API来定义任务。例如,可以使用gulp.task()方法定义一个任务,该方法接受两个参数:任务的名称和任务要执行的操作。可以使用gulp.src()方法指定要处理的文件,然后使用各种Gulp插件来执行各种操作,例如gulp-concat用于合并文件,gulp-uglify用于压缩JavaScript文件等。 最后,可以使用gulp.dest()方法将处理后的文件保存到指定目录。定义好任务后,可以在终端中使用gulp命令来执行任务,Gulp会自动执行任务并输出相关日志信息。 ### 回答2: Gulp是一个前端自动化工具,它通过编写简洁、易于理解的代码来帮助开发者自动化前端开发中的各种任务。 首先,Gulp使用简单且灵活。它使用流的概念,让开发者能够通过将任务连接在一起构建整个开发流程。开发者可以定义各种任务,如压缩文件、合并文件、编译代码等等,然后通过管道将这些任务链接在一起。这种方式使得构建前端项目变得非常容易,同时也让开发者能够根据自己的需求定制任务流程。 其次,Gulp有大量的插件可供选择。Gulp的插件系统非常强大,社区中有数以千计的插件可用。这些插件可以帮助开发者解决各种问题,如自动添加浏览器前缀、压缩文件、优化图片等等。开发者可以根据自己的需求选择合适的插件使用,从而提高工作效率。 另外,Gulp还具有良好的生态系统。无论是官方文档还是社区文档,都非常详细且易于理解。开发者可以很容易地找到所需的信息和教程,学习如何使用Gulp来优化自己的工作流程。 总的来说,Gulp是一个功能强大且易于使用的前端自动化工具。它能够帮助开发者提高工作效率,简化开发流程,同时也具有丰富的插件和优秀的生态系统。无论是小型项目还是大型项目,Gulp都是一个非常好的选择。 ### 回答3: Gulp是一个前端自动化工具,用于简化开发流程和提高工作效率。它基于流(stream)的概念,可以自动化处理和优化前端工作中的许多重复任务。 首先,通过在项目中配置gulpfile.js文件,可以定义各种任务(task)和相应的操作。可以使用Gulp来执行各种编译、压缩、合并、重命名、清理等操作,例如压缩CSS和JavaScript文件、编译Sass或Less、优化图像等等。这些任务可以按照开发者的需求进行自定义配置,满足不同项目的要求。 Gulp的使用也非常简单,只需要通过命令行运行gulp命令并指定要执行的任务即可。当有文件变动时,Gulp可以自动监听文件的变化并重新执行相应的任务,实时更新项目的输出。 此外,Gulp还支持插件生态系统,拥有大量的插件可供开发者选择使用。这些插件可以用于执行各种任务,例如自动生成CSS前缀、合并相同类型的文件、启动本地开发服务器等等。 总的来说,Gulp通过简化和自动化前端开发流程,大大提高了开发效率。它的简单易用和丰富的插件生态系统使得开发者能够根据项目需求快速搭建和优化前端工作流程。使用Gulp可以减少重复劳动,提高代码质量和开发效率,因此成为前端开发中不可或缺的工具之一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值