gulp-eagle 一個能夠快速使用gulp構建前端項目的工具

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 以前（詳情見glob2base）

假設在一個路徑爲 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. 項目地址

https://github.com/youngluo/gulp-eagle