博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
gulp-eagle 一个可以快速使用gulp构建前端项目的工具
阅读量:6848 次
发布时间:2019-06-26

本文共 2261 字,大约阅读时间需要 7 分钟。

Gulp Eagle

1. 简介

Gulp Eagle 是基于 Laravel Elixir 改造的 gulp 构建工具。它提供了简洁的 API ,方便我们快速的使用 gulp 构建前端项目。

2. 安装

npm install --save-dev gulp-eagle

3. 使用

var Eagle = require('gulp-eagle');Eagle(function (mix) {    mix        .sass('./src/**/*.scss', 'css')        .script('./src/**/*.js', 'js')});

4. 运行

  • gulp:运行所有任务;

  • gulp watch:监控前端资源的改变,开启浏览器实时刷新功能;

  • gulp --prod:运行所有任务,自动压缩任务中的 css 、js 和图片文件,并为配置文件中指定的文件类型加上版本号。

5. API

5.1 sass(src[, output, options])

将 sass 文件编译成 css 文件。

mix.sass('./src/**/*.scss', 'css')
src

类型:String 或 Array

源文件。

output

类型:String

产出路径。

options

类型:Object

options.base

类型:String 默认值:将会加在 glob 之前(详情见)

假设在一个路径为 src/scss/aaa 的目录中,有一个文件叫 aaa.scss :

// 匹配 'src/scss/aaa/aaa.scss' 并且将 base 解析为 src/scss/ 最终产出到 'build/aaa/aaa.css'mix.sass('./src/scss/**/*.scss')// 产出到 'build/scss/aaa/aaa.css'mix.sass('./src/scss/**/*.scss', { base: 'src' })
options.removePath

类型:Boolean 默认值:true

默认去除源文件原有路径,只保留目标文件到产出文件夹(build)中。

5.2 sassIn(src, output)

将多个 sass 文件合并编译成 css 文件。

mix.sass([    './src/aaa/*.scss',    './src/bbb/*.scss'], 'css/app.css')
src

类型:String 或 Array

源文件。

output

类型:String

产出路径,必须以文件名结尾,如css/app.css

5.3 style(src[, output, options])

产出原生 css 文件,参数详情见 5.1。

mix.style('./src/css/*.css', 'css')

5.4 styleIn(src, output)

合并多个原生 css 文件,参数详情见 5.2。

mix.styleIn([    './src/aaa/aaa.css',    './src/bbb/bbb.css'], 'css/app.css')

5.5 script(src[, output, options])

产出 js 文件,参数详情见 5.1。

mix.script('./src/js/*.js', 'js')

5.6 scriptIn(src, output)

合并多个 js 文件,参数详情见 5.2。

mix.scriptIn([    './src/aaa/aaa.js',    './src/bbb/bbb.js'], 'css/app.js')

5.7 browserify(src[, output])

可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 javascript 代码,通过预编译让前端 javascript 可以直接使用 node npm 安装的一些库。

mix.browserify('./src/app.js')
src

类型:String

使用 Browserify 方式组织代码的入口 javascript 文件。

output

类型:String 默认值:入口文件名

产出路径,必须以文件名结尾。

5.8 image(src[, output, options])

产出图片文件,参数详情见 5.1。

mix.image('./src/images', 'images', {removePath: false})

5.9 html(src[, output, options])

产出html文件,参数详情见 5.1。

mix.html('./src/**/*.html')

5.10 copy(src[, output, options])

复制文件,参数详情见 5.1。

mix.copy('./src/assets/fonts/**', 'assets/fonts')

5.11 clean(src)

清除文件。

src

类型: String 或 Array 默认值:配置文件中指定的产出文件夹(build)

mix.clean()

注意:src默认是从配置文件指定的产出文件夹(build)中查找,如需从当前项目根目录下查找,则在路径前加上./;output默认输出在build文件夹中。

6. 项目地址

转载地址:http://odlul.baihongyu.com/

你可能感兴趣的文章
ERStudio的使用
查看>>
git 本地与服务器的同步
查看>>
css鼠标移动到文字上怎样变化背景颜色
查看>>
HBase 实战(1)--HBase的数据导入方式
查看>>
浅谈WEB页面提速(前端向)
查看>>
05 语句处理
查看>>
POJ 3177 Redundant Paths POJ 3352 Road Construction(双连接)
查看>>
ERROR: Java 1.7 or later is required to run Apache Drill.
查看>>
初入android驱动开发之字符设备(一)
查看>>
外网上传到NAS速度很慢是什么情况?上行1M都不到,但是测试有4M
查看>>
ASP.NET Core 中使用 GrayLog 记录日志
查看>>
RabbitMQ的几种工作模式
查看>>
关于Java类加载双亲委派机制的思考(附一道面试题)
查看>>
java中关于volatile的理解疑问?
查看>>
SQL Server Management Studio(SSMS)的使用与配置整理
查看>>
Activit工作流学习例子
查看>>
SQL Server 中位数、标准差、平均数
查看>>
机器如何猜你所想?阿里小蜜预测平台揭秘
查看>>
关于数组array_diff(array1, array2)求差集来比较数组是否相等的问题细究
查看>>
React 源码深度解读(七):事务 - Part 1
查看>>