laravel前端内容编译：小白的惨痛经历

第一次用Laravel，结果当然很不熟悉，所以照着教程一步步下去，很可惜的是教程是Laravel 5.1的，我装的版本是Laravel 5.4的，教程上说用gulp进行编译，结果没给配置文件，我有一句MMP一定要说！

所以就结合自己以前的一点经验开始蒙了，现在总结如下：

package.json

这个可以看成是npm的配置文件，在里面可以配置你需要的内容，这个文件是默认生成好的，但是我也还是贴一下吧：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

至于里面的内容是什么含义，我～不～知～道～

有这个文件之后可以看看自己有没有node_modules文件夹，如果没有，则在该package.json文件的路径下运行

# 这个命令是根据package.json文件安装其中所需要的文件，默认全部安装在node_modules文件夹下
npm install

既然提到项目创建后缺失文件的情况，我曾经缺失过vendor文件夹，于是就在项目根目录下运行：

# 这个命令是根据composer.json文件下载所需要的包，最后生成vendor文件夹
composer install 

webpack.min.js

这个文件好像laravel设置的编译设置，内容如下：

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

从这个文件可以看出，resources/assets/js/app.js下的app.js文件会被编译到public/js下，resources/assets/sass/app.scss下的app.scss文件会被编译到public/css下。

编译文件

原理什么的我现在还不知道，所以这里只是介绍方法，首先到你项目的根目录下，我的根目录是：var/www/laravel4，这里再贴一张图吧：

现在应该很清除项目根目录在哪里了，就cd到根目录下，运行下面两个命令，分别有不同的效果：

#一次性编译全部的文件
npm run dev
#一直开启监视，一旦原文件发生修改，则自动编译
nmp run watch

上面两个命令选择其中一个进行运行，都可以把最新的设置编译到执行文件中。

详细的介绍可以看官网上的介绍，反正我是没看懂