1、package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
}
2、执行cnpm install
3、设置gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js');
mix.version(['js/app.js','css/app.css']);
});
4、执行gulp
Task │ Summary │ Source Files │ Destination │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass() │ 1. Compiling Sass │ resources\assets\sass\app.scss │ public\css\app.css │
│ │ 2. Autoprefixing CSS │ │ │
│ │ 3. Concatenating Files │ │ │
│ │ 4. Writing Source Maps │ │ │
│ │ 5. Saving to Destination │ │ │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources\assets\js\app.js │ public\js\app.js │
│ │ 2. Writing Source Maps │ │ │
│ │ 3. Saving to Destination │ │ │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.version() │ 1. Versioning │ public\js\app.js │ public\build │
│ │ 2. Rewriting File Paths │ public\css\app.css │ │
│ │ 3. Saving to Destination │ │ │
│ │ 4. Copying Source Maps │ │ │
5、文件引用
<link href="{{elixir('/css/app.css')}}" rel="stylesheet">
<script src="{{elixir('/js/app.js')}}"></script>
@yield('js')
注意:
bootstrap.js中
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('./select2.min'); //引入js
window.Vue = require('vue');
require('vue-resource');
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
// Variables
@import "variables";
// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "./../css/select2.min";
@import "./../css/style"; //引入css