laravel - How to debug Laravel5 Elixir gulpfile.js? - Stack Overflow
to customize your list.
This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our , , and our .
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I'm having the following gulpfile.js:
var elixir = require('laravel-elixir');
|--------------------------------------------------------------------------
| 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 Less
| file for our application, as well as publishing vendor resources.
var paths = {
'jquery': './vendor/bower_components/jquery/',
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/',
'js': './resources/js/'
elixir(function (mix) {
mix.sass('app.scss', 'public/css/')
.copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
paths.jquery + "dist/jquery.js",
paths.bootstrap + "javascripts/bootstrap.js",
paths.js + "app.js"
'public/js/app.js', './')
.version(['js/app.js', 'css/app.css']);
mix.copy('public/js/app.js.map', 'public/build/js/app.js.map');
mix.copy('public/css/app.css.map', 'public/build/css/app.css.map');
However, the .map-files are not copied to the public/build/ folder. Am I doing something wrong with mix.copy()? How can I see why the files are not copied?
I actually think this is a bug in Laravel Elixir as well, since mix.version() should already copy the .map files already without the need for manual copying.
I filed a issue on Github:
8,58232349
As @Thomas said, it's fixed now:
Commit message:
When versioning files, copy over .map files as well.
7,846651106
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
Post Your Answer
By clicking &Post Your Answer&, you acknowledge that you have read our updated ,
and , and that your continued use of the website is subject to these policies.
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
下面是 gulpfile.js:
var elixir = require('laravel-elixir');
require('laravel-elixir-sass-compass');
elixir(function(mix) {
mix.compass(['app.scss', 'controllers.scss']).version('css/app.css');
mix.scripts(['jquery.js','app.js']).version('js/all.js');
问题：我想添加browserSync() 到gulpfile.js中，应该怎么写呢？文档中是下面这样，但是要添加到上面代码中，不知道怎么做。
elixir(function(mix) {
mix.browserSync({
proxy: 'project.app'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
就是像官网那样，把那个添加到你的任务里，当然官网的示例设置写得比较简略，其他的设置其实应该去browser-sync的官网看看的(看下它的gulp配置示例)，我的配置你参考下：
gulpfile.js
elixir(function(mix) {
mix.sass('./resources/assets/sass/**/*.scss','public/dist/css/app.css');
mix.browserify('index.js', 'public/dist/js/build-index.js');
// 实时监听文件
mix.browserSync({
proxy: '192.168.0.112',
// apache或iis等代理地址
port: 3000,
notify: false,
// 刷新是否提示
watchTask: true,
open: 'external',
host: '192.168.0.112',
// 本机ip, 这样其他设备才可实时看到更新
这两篇笔记你可以看下，对你理解可能有帮助：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。一步一步学Laravel，安装gulp使用Laravel Elixir编辑前端资源 – Onlyke
Introduction作者：Daniel Sun
努力成为全栈攻城狮
家有小仙女：
- 2,352 views - 2,042 views
- 29,944 views - 13,321 views - 12,353 views - 10,564 views - 7,031 views - 6,473 views - 6,365 views - 5,593 views - 5,560 views - 5,541 views
分类目录分类目录
选择分类目录
Linux&&(51)
&&&Openwrt&&(7)
&&&macos&&(1)
minecraft&&(3)
Nginx&&(13)
Node.js&&(2)
&&&Laravel&&(14)
Python&&(2)
&&&mysql&&(5)
wordpress&&(3)
未分类&&(3)
生活&&(12)如今laravel来到5.4版本，更方便引入vue了，具体步骤如下：
下图为我动到的文件
1.下载laravel5.4
2.命令行（laravel5.4目录下）：composer install
3.新建.env文件，把.env.example里的内容复制到.env文件中
4.生成key，命令行：&artisan key:generate
5.配置文件package.json，内容如下：
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"css-loader": "^0.25.0",
"element-ui": "^1.1.1",
"gulp": "^3.9.1",
"handsontable": "0.27.0",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.10",
"style-loader": "^0.13.1",
"vue": "^2.1.4",
"vue-loader": "^10.0.0",
"vue-resource": "^1.0.3",
"vue-router": "^2.1.1",
"vue-template-compiler": "^2.1.4",
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"lodash": "^4.16.2"
"dependencies": {}}&span style="font-size:18"&&/span&
6.命令行（没有npm的自行下载）：npm install
7.resources/assets/js下新建App.vue文件，内容如下：
&template&
&div id="app"&
&router-view&&/router-view&
&/div&&/template&
8.resources/assets/js/app.js
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */
require('./bootstrap');/** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */import App from './App.vue'import VueRouter from 'vue-router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'
Vue.use(VueRouter)Vue.use(ElementUI)
const router = new VueRouter({
{ path: '/', component: require('./components/Example.vue') }
const app = new Vue({
el: '#app',
template: '&App/&',
components: { App }});&span style="font-size:18"&&/span&
9.把resources/view/welcome.blade.php改为：
&!DOCTYPE html&&html lang="en"&&head&
&meta charset="UTF-8"&
&title&Hello&/title&&/head&&body&&div id="app"&&/div&
&script src="{{ asset('js/app.js') }}"&&/script&&/body&&/html&
10.在主目录下新建gulpfile.js文件，内容：
const elixir = require('laravel-elixir');const path = require('path');
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 our application, as well as publishing vendor resources. | */
elixir(mix =& {
// Elixir.webpack.config.module.loaders = [];
Elixir.webpack.mergeConfig({
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
loaders: [
test: /\.css$/,
loader: 'style!css'
mix.sass('app.scss')
.webpack('app.js')});
11.命令行（没有gulp,自行下载）：gulp watch
关于laravel中使用gulp Elixir编辑前端资源也可以参考：　　　及　　
本文章转载自
在laravel5.4中有一个更简单的方法，是使用Mix，配置详情请参照&
阅读(...) 评论()}