概述
通常前端开发处理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