Laravel技巧集锦（28）：使用gulp编译css js

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、文件引用

 




 @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();
});

app.scss中

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";


@import "./../css/select2.min";
@import "./../css/style";  //引入css

目录结构图