跳转到主要内容

概述

通常前端开发处理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
图像
Laravel mix使用BrowserSync监视文件

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

分类