laravel 之集成前端资源：Laravel Elixir

版本说明

laravel5.2,centos7_64x

安装node

建议安装node6版本，其他版本很多不兼容
https://nodejs.org/zh-cn/download/releases/

wget https://nodejs.org/download/release/v6.13.0/node-v6.13.0-sunos-x64.tar.gz

解压

tar -xvf node-v6.13.0-sunos-x64.tar.gz

将解压后的名字，更改名

mv node-v6.13.0-sunos-x64 node

移动到/usr/local/

mv node /usr/local/

添加环境变量

vim /etc/profile

最后加入

export NODE_HOME=/usr/local/node  
export PATH=$NODE_HOME/bin:$PATH  

生效文件

source /etc/profile

使用

全局安装

npm install --global gulp

laravel目录下

npm install

gulp的详细查看
https://www.gulpjs.com.cn/

运行命令

执行全部输出

gulp

运行压缩文件输出

gulp --production

自动监听文件输出

这个需要在gulpfile.js下文件配置好的文件，最后执行这个，那这些配置好的文件才会被监听，如果后面新怎的，需要重新执行这个命令，否则无法自动

gulp watch

处理CSS

//单个

//less
elixir(function(mix) {
    mix.less('app.less');
});
//sass
elixir(function(mix) {
    mix.sass('app.scss');
});
//CSS
elixir(function(mix) {
    mix.styles([
        'normalize.css',
        'main.css'
    ]);
});

多个文件,最后输出public/css/app.css

elixir(function(mix) {
     mix.less(
         [
             'style.less',
             'base.less'
         ]
     );
 });

指定输出目录

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

指定输出文件名字

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

源地图

方便浏览器调试，默认开启，如果需要关闭在gulpfile.js下

elixir.config.sourcemaps = false;

js使用

CoffeeScript，JS的编程，快速生成原生JS，类似LESS，SASS这种
网站：http://coffeescript.org/

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

例子CoffeeScript

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

输出后的JS

(function() {
  var cubes, list, math, num, number, opposite, race, square,
    slice = [].slice;

  number = 42;

  opposite = true;

  if (opposite) {
    number = -42;
  }

  square = function(x) {
    return x * x;
  };

  list = [1, 2, 3, 4, 5];

  math = {
    root: Math.sqrt,
    square: square,
    cube: function(x) {
      return x * square(x);
    }
  };

  race = function() {
    var runners, winner;
    winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : [];
    return print(winner, runners);
  };

  if (typeof elvis !== "undefined" && elvis !== null) {
    alert("I knew it!");
  }

  cubes = (function() {
    var i, len, results;
    results = [];
    for (i = 0, len = list.length; i < len; i++) {
      num = list[i];
      results.push(math.cube(num));
    }
    return results;
  })();

}).call(this);

//# sourceMappingURL=app.js.map

更少的代码，提高效率，不错。
其他几个，使用不到，就不说了

JS脚本

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

合并到不同的文件

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(function(mix) {
     mix.version(['css/app.css', 'js/all.js']);
 });

blade使用

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

自动刷新浏览器

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

gulp的任务

调用存在的Gulp任务
比如

gulp.task('build-less', function(){
  gulp.src('./javis/static/less/lib/s-production.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/lib/s-skins.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/lib/s/s.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/lib/'))

  gulp.src('./javis/static/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./javis/static/build/css/'))
});

Elixir 中调用该任务

elixir(function(mix) {
    mix.task('build-less');
});

自定义监控者

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

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

编写 Elixir 扩展

类似gulp的任务，你可以使用任务来写，只是这个可以写在一个扩展文件里面，显得更好一点。

var elixir = require('laravel-elixir');
var gulp = require('gulp');
var shell = require('gulp-shell');


 elixir(function(mix) {
     mix.less(
         [
             'style.less',
             'base.less'
         ]
     );
 });
 var Task = elixir.Task;

 elixir.extend('speak', function(message) {
     new Task('speak', function() {
         return gulp.src('').pipe(shell('say ' + message));
     });
 });
 elixir(function(mix) {
     mix.speak('Tea, Earl Grey, Hot');
 });