在 Laravel 项目中使用 Glup 之 Laravel-Elixir

环境准备

1、安装 nodejs 和 npm

 如果你使用的是 Laravel 的 Homestead 环境，可以不用安装了，已自带。

 我们来查看下它们的版本：

$ node -v
$ npm -v

 如果没有安装，去 nodejs官网 下载安装[ 傻瓜式 ]即可！

 nodejs 从 5.0 起就将 npm 打包下载了，所以不用手动再安装 npm 了！

2、安装全局的 gulp

全局安装：

$ npm install --global gulp-cli

查看版本：

$ gulp -v

传送门： Gulp 官方文档

3、安装 Laravel Elixir

在新安装的 Laravel 根目录下，你会发现有一个 package.json 文件。这个文件和 composer.json 一样，只不过是用来定义 Node 依赖而非 PHP，你可以通过运行如下命令来安装需要的依赖：

$ cd 你的 Laravel 项目的根目录 

$ npm install

你将会看到，根目录下多了一个 node_modules 目录，这里就是这个命令依据 composer.son 来安装的 node 的依赖包。其中就有 glup 和 laravel-elixir

4、npm install 执行巨慢的解决之道

方法一：使用 vpn

• 传送门 ：点这里

方法二：使用国内镜像 --- 淘宝的 cnpm

• 传送门 ： 淘宝 NPM 镜像

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样，你就可以使用 cnpm 替代 npm 了

$ cnpm install [name]

备注下 这里 我遇到的一个问题：

使用 cnpm 速度起飞，但是不知道为什么 PhpStorm 却卡住了

求解释！求解决之道！

到这里，你就可以愉悦地使用 laravel-elixir 来管理你的前端资源了！

以下内容源于： Laravel 学院

出处： http://laravelacademy.org/post/3137.html

运行 Elixir

Elixir 基于 Gulp，所以要运行 Elixir 命令你只需要在终端中运行 gulp 命令即可。添加 --production 标识到命令将会最小化 CSS 和 JavaScript 文件：

// Run all tasks...
gulp

// Run all tasks and minify all CSS and JavaScript...
gulp --production

监控前端资源改变

由于每次修改前端资源后都要运行 gulp 很不方便，可以使用 gulp watch 命令。该命令将会一直在终端运行并监控前端文件的改动。当改变发生时，新文件将会自动被编译：

$ gulp watch

处理 CSS

项目根目录下的 gulpfile.js 文件包含了所有的 Elixir 任务。Elixir 任务可以使用方法链的方式链接起来用于定义前端资源如何被编译。

Less

要将 Less 编译成 CSS，可以使用 less 方法。less 方法假定你的 Less 文件都放在 resources/assets/less。默认情况下，本例中该任务会将编译后的 CSS 放到public/css/app.css：

elixir(function(mix) {
    mix.less('app.less');
});

你还可以将多个 Less 文件编译成单个 CSS 文件。同样，该文件会被放到 public/css/app.css：

elixir(function(mix) {
    mix.less([
        'app.less',
        'controllers.less'
    ]);
});

如果你想要自定义编译后文件的输出位置，可以传递第二个参数到 less 方法：

elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets');
});

// Specifying a specific output filename...
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets/style.css');
});

Sass

sass 方法允许你将 Sass 编译成 CSS。假定你的 Sass 文件存放在resources/assets/sass，你可以像这样使用该方法：

elixir(function(mix) {
    mix.sass('app.scss');
});

同样，和 less 方法一样，你可以将多个脚本编译成单个 CSS 文件，甚至自定义结果 CSS 的输出路径：

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css');
});

原生CSS

如果你只想要将多个原生 CSS 样式文件合并到一个文件，可以使用 styles 方法。传递给该方法的路径相对于resources/assets/css 目录，结果 CSS 被存放在 public/css/all.css：

elixir(function(mix) {
    mix.styles([
        'normalize.css',
        'main.css'
    ]);
});

当然，你还可以通过传递第二个参数到 styles 方法来输出结果文件到一个自定义路径：

elixir(function(mix) {
    mix.styles([
        'normalize.css',
        'main.css'
    ], 'public/assets/css');
});

源地图

默认源地图被启用，所以，对于每一个你编译过的文件都可以在同一目录下找到一个对应的 *.css.map 文件。这种匹配允许你在浏览器中调试时将编译过的样式选择器回溯到原来的 Sass 或 Less。

如果你不想为 CSS 生成源地图，可以使用一个简单配置选项关闭它们：

elixir.config.sourcemaps = false;

elixir(function(mix) {
    mix.sass('app.scss');
});

处理JavaScript

Elixir 还提供了多个函数帮助你处理 JavaScript 文件，例如编译 ECMAScript 6，CoffeeScript，Browserify，最小化以及简单连接原生JavaScript文件。

CoffeeScript

coffee 方法用于将 CoffeeScript 编译成原生 JavaScript。该方法接收关联到 resources/assets/coffee 目录的 CoffeeScript 文件的一个字符串或数组并在 public/js 目录下生成单个 app.js 文件：

elixir(function(mix) {
    mix.coffee(['app.coffee', 'controllers.coffee']);
});

Browserify

Elixir 还提供了 browserify 方法，从而让你可以在浏览器中引入模块并使用 EcmaScript 6。

该任务假定你的脚本都存放在 resources/assets/js 而且将结果文件存放到 public/js/bundle.js：

elixir(function(mix) {
    mix.browserify('main.js');
});

除了处理 Partialify 和 Babelify，还可以安装并添加更多：

$ npm install vueify --save-dev

 

elixir.config.js.browserify.transformers.push({
    name: 'vueify',
    options: {}
});

elixir(function(mix) {
    mix.browserify('main.js');
});

Babel

babel 方法可用于将EcmaScript 6和7编译成原生JavaScript。该方法接收相对于 resources/assets/js 目录的文件数组，并在 public/js 目录下生成单个all.js：

elixir(function(mix) {
    mix.babel([
        'order.js',
        'product.js'
    ]);
});

要选择不同的输出路径，只需将目标路径作为第二个参数传递给该方法。处了 Babel 编译之外，babel 和 mix.scripts()的使用方法和功能差不多。

脚本

如果你有多个 JavaScript 文件想要编译成单个文件，可以使用 scripts 方法。

scripts 方法假定所有路径相对于 resources/assets/js 目录，而且所有结果 JavaScript 默认存放在public/js/all.js：

elixir(function(mix) {
    mix.scripts([
        'jquery.js',
        'app.js'
    ]);
});

如果你需要将多个脚本集合合并到不同的文件，需要多次调用 scripts 方法。该方法的第二个参数决定每个合并的结果文件名：

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

如果你需要将多个脚本合并到给定目录，可以使用 scriptsIn 方法。结果 JavaScript 会被存放到 public/js/all.js：

elixir(function(mix) {
    mix.scriptsIn('public/js/some/directory');
});

拷贝文件/目录

你可以使用 copy 方法拷贝文件/目录到新路径，所有操作都相对于项目根目录：

elixir(function(mix) {
    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

elixir(function(mix) {
    mix.copy('vendor/package/views', 'resources/views');
});

版本号/缓存刷新

很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本。Elixir 可以使用 version 方法为你处理这种情况。

version 方法接收相对于 public 目录的文件名，附加唯一hash到文件名，从而实现缓存刷新。例如，生成的文件名看上去是这样——all-16d570a7.css：

elixir(function(mix) {
    mix.version('css/all.css');
});

生成版本文件后，可以在视图中使用 Elixir 全局的 PHP 帮助函数 elixir 方法来加载相应的带hash值的前端资源，elixir 函数会自动判断hash文件名：

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

给多个文件加上版本号

你可以传递一个数组到 version 方法来为多个文件添加版本号：

elixir(function(mix) {
    mix.version(['css/all.css', 'js/app.js']);
});

一旦文件被加上版本号，就可以使用帮助函数 elixir 来生成指向该hash文件的链接。记住，你只需要传递没有hash值的文件名到elixir方法。该帮助函数使用未加hash值的文件名来判断文件当前的hash版本：

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

<script src="{{ elixir('js/app.js') }}"></script>

BrowserSync

BrowserSync 会在你修改前端资源后自动刷新浏览器，运行 gulp watch 命令时你可以使用 browserSync 方法告知Elixir 启动一个 BrowserSync 服务器：

elixir(function(mix) {
    mix.browserSync();
});

运行gulp watch后，使用 http://homestead.app:3000 访问应用来开启浏览器同步。如果你在本地开发中使用homestead.app之外的其它域名，可以传递域名参数到 browserSync 方法：

elixir(function(mix) {
    mix.browserSync({
        proxy: 'project.app'
    });
});

调用存在的Gulp任务

如果你需要从 Elixir 调用已存在的 Gulp 任务，可以使用 task 方法。例如，假定你有一个调用时只是简单说几句话的 Gulp 任务：

gulp.task('speak', function() {
    var message = 'Tea...Earl Grey...Hot';
    gulp.src('').pipe(shell('say ' + message));
});

如果你想要从 Elixir 中调用该任务，使用 mix.task 方法并传递任务名作为该方法的唯一参数：

elixir(function(mix) {
    mix.task('speak');
});

自定义监控者

如果你需要注册一个监控器在每一次文件修改时都运行自定义任务，传递一个正则表达式作为 task 方法的第二个参数：

elixir(function(mix) {
    mix.task('speak', 'app/**/*.php');
});

编写 Elixir 扩展

如果你需要比 Elixir 的 task 方法所提供的更加灵活的功能，可以创建自定义的 Elixir 扩展。Elixir 扩展允许你传递参数到自定义任务，例如，你可以像这样编写一个扩展：

// File: elixir-extensions.js
var gulp = require('gulp');
var shell = require('gulp-shell');
var Elixir = require('laravel-elixir');

var Task = Elixir.Task;

Elixir.extend('speak', function(message) {
    new Task('speak', function() {
        return gulp.src('').pipe(shell('say ' + message));
    });
});

// mix.speak('Hello World');

就是这样简单！注意你的特定Gulp逻辑应该放到闭包函数里作为第二个参数传递给 Task 构造器。你可以将其放在Gulpfile 顶端，或者将其解析到自定义的任务文件。例如，如果你将扩展放在 elixir-extensions.js，可以在主Gulpfile 中像这样引入该文件：

// File: Gulpfile.js
var elixir = require('laravel-elixir');

require('./elixir-extensions')

elixir(function(mix) {
    mix.speak('Tea, Earl Grey, Hot');
});

自定义监控器

如果你想要自定义任务在运行 gulp watch 的时候被触发，可以注册一个监控器：

new Task('speak', function() {
    return gulp.src('').pipe(shell('say ' + message));
}).watch('./app/**');