如何让一个laravel 5.3应用程序在SASS/JS发生变化时自动加载
How to get a laravel 5.3 app to autoreload when SASS/JS changes
想要自动重载页面每当我改变我的SASS或Javascript,但不确定如何在laravel 5.3中使用WebPack。我听说过热模块替换,但它似乎真的很复杂,有没有一种方法可以把它集成到我的gulpfile中。
Gulpfile:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for your application as well as publishing vendor resources.
|
*/
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js');
});
EDIT(尝试BrowserSync但未更新)
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var BrowserSync = require('laravel-elixir-browsersync-official');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for your application as well as publishing vendor resources.
|
*/
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js')
.browserSync({
port: 8000,
proxy: 'localhost'
});
});
您可以使用browserSync
。
安装browserSync
命令:
npm install laravel-elixir-browsersync-official --save
然后在gulpfile
中添加:
.browserSync({
proxy: 'app.dev',
})
(将app.dev
更改为您实际的应用程序url)
那么当你运行gulp watch
时,浏览器应该在检测到更改时自动重新加载。
希望这对你有帮助!
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 带有sass插件的Gruntfile.js不会缩小所有scs文件
- 管理web组件的依赖关系;JS、CSS/SASS和模板文件
- 在处失败node-sass@0.9.6安装脚本'nodebuild.js'
- grunt sass和js自动加载器
- 吞下手表,装上jekyll,sass,js
- 通过Grunt使用Node.js工作SASS预处理器
- 如何让一个laravel 5.3应用程序在SASS/JS发生变化时自动加载
- Sass.js @imports不起作用
- Grunt JS /约曼生成器与Sass,指南针,Susy