在web前端项目中使用Laravel Mix编译处理SCSS和JS

概述

通常前端开发处理SCSS预编译和资源打包的时候会想到Gulpjs，但是相较于Gulpjs,还有一种更加快捷简单的处理工具。那就是Laravel Mix，一个由Laravel提供的流畅且实用的优化资源的工具，可用来独立编译处理前端资源，如CSS和JavaScript等。它类似于gulp，Grunt等构建工具。从使用上，个人感觉比gulp更加轻便，关键是配置少，依赖配置也简单。 这个工具并不局限于Laravel使用，普通的前端项目也是可以通过简单的npm配置使用的，Drupal的radix基主题默认就是使用的Laravel Mix来处理资源。 本文将从安装，设置，资源文件处理，浏览同步等几个方面来完整展现Laravel Mix在常规web前端项目中的使用方法。

安装Laravel Mix

准备

安装Laravel Mix的前提是先安装NodeJS，NodeJS是一个开放源代码服务器环境，而NPM（节点程序包管理器）是一个依赖项管理实用程序，可以像Composer管理php一样管理Node模块。建议选择推荐的LTS版本，默认安装即可。如果系统已经安装了，则可以直接开始安装Laravel Mix。查看当前版本的命令

node -v
#npm默认包含在nodejs中
npm -v

在国内注意吧npm源切换到淘宝源，否则速度会比较慢。

npm config set registry https://registry.npm.taobao.org
// 配置后可通过终端命令来验证
npm config get registry
// 或者
npm info express

安装

新创建或者在当前web项目中初始化一个package.json

npm init

完成后打开并编辑package.json,替换键"devDependencies"的值,这些是需要用到的依赖

{
"devDependencies": {
    "browser-sync": "2.26.7",
    "browser-sync-webpack-plugin": "2.2.2",
    "cross-env": "^7.0.2",
    "jquery": "3.4.1",
    "laravel-mix": "^5.0.4",
    "popper.js": "1.16.1",
    "resolve-url-loader": "2.3.2",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.11"
  },
}

完成以上设置后，在当前项目目录运行安装命令

npm install

继续编辑package.json，替换键"scripts"的值，这些是可执行的任务

{
"scripts": {
    "dev": "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",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

watch键对应的功能是根据配置文件监视相应文件的变化并及时编译处理，开启此功能将一直处于监视状态

npm run watch

production和dev运行只执行一次，差别主要是production会对资源文件进行minify处理。

npm run production

将./node_modules/laravel-mix/setup/webpack.mix.js拷贝到当前根目录,这个文件有大量参考的使用方法，其中未注释部分根据自己的目录情况进行修改：

let mix = require('laravel-mix');
mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

资源处理

编译处理SCSS

Laravel Mix为大多数常见的CSS预处理程序（如SASS，LESS和Stylus）提供全面支持。例如scss 

mix.sass('src/sass/app.scss', 'dist/');

还可以使用下面的styles（）方法将纯CSS文件合并连接为一个css文件。

mix.styles([
    'dist/css/base.css',
    'dist/css/app.css'
], 'target/css/all.css');

样式的浏览器前缀

PostCSS，由于不同的浏览器对个别的CSS3样式解释有差异，所以就有了 Autoprefixer插件来添加浏览器前缀从而统一显示，Mix 使用了流行的 Autoprefixer 插件来自动添加所需要的 CSS3 浏览器引擎前缀。

mix.sass('src/sass/app.scss', 'dist/css')
   .options({
        postCss: [
            require('postcss-css-variables')()
        ]
   });

处理JavaScript

还可以将最新版本的JavaScript代码（如ECMAScript 2015等）编译为单个JavaScript文件。

mix.js('src/js/app.js', 'dist/js'); 

也可以使用scripts()方法将多个JavaScript文件合并为一个文件

mix.scripts([ 'src/js/base.js', 'src/js/app.js' ], 'target/js/all.js');

拷贝文件和目录

copy()方法可用于将文件和目录从一个位置移动到另一位置。 如果要将某些字体文件从node_modules文件夹移动到另一个位置，则可以使用此方法。

mix.copy('node_modules/font-awesome/fonts/*', 'assets/fonts/');

当您使用copy()适合复制单层的目录结构，要维护目录结构，则使用copyDirectory（）方法。

mix.copyDirectory('src/img', 'assets/img');

版本设置

通常在前端项目中因为文件同名及浏览器缓存的问题，导致静态资源无法及时刷新，这时候可以使用version()方法。 这个方法会自动将唯一的哈希值添加到文件名中。

mix.js('src/js/app.js', 'dist/js/').version();

浏览器同步加载

BrowserSync会自动监视所有文件的新更改，并更新浏览器的更改，不必手动刷新浏览器。

mix.browserSync({ 
proxy: proxy, //如果需要代理域名，没有就注释掉本行
 files: ['assets/js/**/*.js', 'assets/css/**/*.css'], //被监视的文件 
 stream: true, 
});

其他方法，见样本文件，由问题建议先参考文档，这个工具文档也比较简单，就一页

参考：
https://learnku.com/docs/laravel/5.8/mix/3905
https://laravel.com/docs/5.8/mix