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 文件中去掉第一行的注释符,如下图:

image

在控制台进行编译,显示已编译成功:

image

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

image

如果想编译多个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')
});

结果如下图:

image

使用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文件的 路径可以添加如下代码,编译时,就会到配置的文件中去找资源:

image

gulp结果:

image

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

合并压缩静态文件

//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 结果:

image

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

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

gulp  --production

image

laravel 解决缓存问题

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

第一种:

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

第二种:

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

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

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

image

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

image

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

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

yarn的使用及其简介

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

并行安装

清晰的输出

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

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

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

安装可以参考官网  yarn安装

同时记得 PHP>5.6.4

image

我要去升级服务器了 , 太low了。悲伤

0 条评论
发表一条评论