laravel与front-end

准备工作

在此之前要安装node  、 npm 。这里安装node 、 npm 就不介绍了，百度一大把。

安装所有的npm依赖包

//进入项目的根目录
npm install

安装完后会出现一个node_modules目录

使用gulp编译sass

npm安装gulp（如果没有翻墙呢，那么很多包安装安装不了得）

//全局安装
npm intall --global gulp
// 项目中安装
npm  install  --save-dev gulp

不过建议用淘宝镜像安装gulp，可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

用淘宝的cnpm安装gulp（用了这个感觉速度超快）

cnpm install gulp

在此可以做一个示例，在 resource/assets/sass/app.scss 文件中去掉第一行的注释符，如下图：

在控制台进行编译，显示已编译成功：

打开public/css/文件， 可知有一个app.css文件，说明编译成功：

如果想编译多个sass文件时，可以在gulpfile.js文件中修改至如下代码：

// 编译道不同的文件中
elixir(function(mix) {
    mix.sass('app.scss','public/css/first.css')
        .sass('two.scss','public/css/two.css');
});


// 编译到同一个文件中
elixir(function(mix) {
    mix.sass(['app.scss','two.scss'],'public/css/first.css')
});

结果如下图：

使用gulp编译less文件

less的编译跟scss的编译非常相同，只需要给scss改为less即可，

elixir(function(mix) {
    mix.less('app.less','public/styles');
      //  .sass('two.scss','public/css/two.css');
});

需要注意的一点就是，在编译的是候会默认的去resource/less文件路径，因此在编译之前需要改文件名，新建也可。

如果想自己配置文件less或scss文件的 路径可以添加如下代码，编译时，就会到配置的文件中去找资源：

gulp结果：

从上图提示的错误就可以知道配置的文件路劲起作用了。

合并压缩静态文件

//elixir.config.assetsPath = 'assets';

elixir(function(mix) {
   // mix.less('app.less','public/styles');
      //  .sass('two.scss','public/css/two.css');
    mix.styles(['a.css','b.css']);
    mix.scripts('js.js');
});

gulp 结果：

可知并未起到压缩结果，只是把几个文件合并为一个文件

如果要起到压缩得结果来提高加载速度：

gulp  --production

laravel 解决缓存问题

在开发中，当我们更新了某个文件时，而本地又有缓存，因此得不到最新的效果。那如和解决这一个问题呢？

第一种：

            手动得在链接地址添加 version 参数。并设置值，这样浏览器就知道更新

第二种：

           在gulpfile.js中添加 version（）方法并传入文件的路径

elixir(function(mix) {
    mix.styles(['a.css','b.css']).version('/css/all.css');
});

gulp下，在public文件夹下多了个build文件，同时也产生了一个hash文件

打开文件可知，在模板中，hash问价才是我们要引入的文件，只需在加载文件时，利用  elixir 方法即可

在浏览器中我们也可以检测到，成功加载

因此，在每次版本更新时，我们只需 gulp 下 就可以得到最新版本

yarn的使用及其简介

百度yarn  pk npm ,总体来说，yarn 比npm 更优越，

并行安装

清晰的输出

安装的时候无法保证速度/一致性

安全问题，因为 npm 安装时允许运行代码

功能差异  ， Yarn 与 npm 很类似，但通过引擎的对比就能察觉 Yarn 的不同

安装可以参考官网  yarn安装

同时记得 PHP>5.6.4

我要去升级服务器了 ， 太low了。