php laravel与front-end


准备工作


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


安装所有的npm依赖包




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


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


使用gulp编译sass


npm安装gulp(如果没有FQ呢,那么很多包安装安装不了得)




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


php laravel与front-end


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


php laravel与front-end


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


php laravel与front-end


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


结果如下图:


php laravel与front-end


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


php laravel与front-end


gulp结果:


php laravel与front-end


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


合并压缩静态文件




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


php laravel与front-end


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


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




gulp --production


php laravel与front-end


laravel 解决缓存问题


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


第一种:


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


第二种:


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




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


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


php laravel与front-end


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


php laravel与front-end


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

php laravel与front-end


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


yarn的使用及其简介


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



并行安装


清晰的输出


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


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


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



安装可以参考官网  yarn安装


同时记得 PHP>5.6.4


php laravel与front-end





0 个评论

要回复文章请先登录注册