guys! My project based on Laravel framework. For main site using Angular, but for admin panel need vue.
I finded this package Larave-Angular with all configs. Package has this gulpfile
const elixir = require('laravel-elixir');
require('laravel-elixir-eslint');
require('./tasks/swPrecache.task.js');
require('./tasks/bower.task.js');
elixir.config.assetsPath = './';
elixir.config.css.folder = 'angular';
elixir.config.css.sass.folder = 'angular';
elixir.config.js.folder = 'angular';
let assets = [
'public/js/final.js',
'public/css/final.css'
],enter code here
scripts = [
'public/js/vendor.js', 'public/js/app.js'
],
styles = [
'./public/css/vendor.css', './public/css/app.css'
],
karmaJsDir = [
'public/js/vendor.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/ng-describe/dist/ng-describe.js',
'public/js/app.js',
'tests/angular/**/*.spec.js'
];
elixir(mix => {
mix.bower()
.copy('angular/app/**/*.html', 'public/views/app/')
.copy('angular/dialogs/**/*.html', 'public/views/dialogs/')
.webpack('index.main.js', 'public/js/app.js')
.sass(['**/*.scss', 'critical.scss'], 'public/css')
.sass('critical.scss', 'public/css/critical.css')
.styles(styles, 'public/css/final.css')
.eslint('angular/**/*.js')
.combine(scripts, 'public/js/final.js')
.version(assets)
.swPrecache();
});
And I have the webpack.config file
module.exports = {
// configuration
entry: "./angular/index.main.js",
module: {
loaders: [{
test: /\.js$/,
loaders: ['ng-annotate','babel?presets[]=es2015'],
exclude: /node_modules/,
}]
}
};
When I try compiled vue files from assets/js, I gived with angular but not with vue. Something with global config?
Or how can I using gulp separately for angular and for vue ?
.js
and vue's in.vue
, webpack is already able to distinguish them by extension and then apply different loader, you just need to merge the above gulp tasks with the default laravel-vue ones, sogulp
andgulp watch
build both angular and vue files. – PanJunjie潘俊杰 2 days ago