Elixir & Gulp

为了方便构建前端，需要了解Elixir和Gulp。同时这篇博文尝试下markdown编辑，主要介绍以下内容：

-Elixir简介、安装与配置
-Elixir使用方法

-Gulp介绍
-Gulp主要方法

---

Elixir简介、安装与配置

Laravel Elixir用一些API为laravel应用定义了基本的Gulp任务，以方便前端的构建。
其使用需要先安装node.js, gulp。
在新安装的laravel下会有一个package.json，用来定义Node的依赖，我们只需要npm install即可安装相关依赖。
安装后再gulpfile.js中包含了所有elixir任务。

Elixir使用方法

编译多个LESS

elixir(function(mix) {
    mix.less([
        'app.less',
        'something-else.less'
    ]);
});

类似的操作会再gulpfile.js中，在gulp命令后，执行
执行过后，只需要在view文件中添加下面代码即可加载被哈希后的文件：

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

可以串联elixir的多个方法如：

elixir(function(mix) {
    mix.less("app.less")
       .coffee()
       .phpUnit()
       .version("css/bootstrap.css");
});

具体参见：http://laravel-china.org/docs/5.0/elixir

Gulp介绍

官网介绍为：Automate and enhance your workflow
Gulp是为了方便和加速前端工作流，它是一个构建系统，能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。

Gulp使用及主要方法

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp

然后，在项目里面安装Gulp：

npm install --save-dev gulp

Gulp通过数据流的方式执行，类似linux中的pipe。能够通过一系列的小函数来传递数据，这些函数会对数据进行修改，然后把修改后的数据传递给下一个函数。
比如如下代码

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

在运行这段程序之前，你需要先安装gulp,gulp-jshint,gulp-uglify和gulp-concat。这个任务会让所有的文件匹配js/*.js（比如js目录下的所有JavaScript文件），并且执行JSHint，然后打印输出结果，取消文件缩进，最后把他们合并起来，保存为build/app.js。

gulp提供了自动检测并且添加相关插件的函数。Gulp-load-plugins0.4.0版本添加了延迟加载功能，使用它只会加载任务中需要的插件。代码如下：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

当然，这仍然需要你在package.json中添加相关NODE依赖：

{
   "devDependencies": {
      "gulp-concat": "~2.2.0",
      "gulp-uglify": "~0.2.1",
      "gulp-jshint": "~1.5.1",
      "gulp": "~3.5.6"
   }
}

官网：http://gulpjs.com/
参考：http://www.w3ctech.com/topic/134