前置知识
在开始学习和使用 lfp-rigger 之前，需要对以下技术点有一定的掌握：
什么是 lfp-rigger
lfp-rigger 是一款基于 Gulp 和 Webpack 的前端自动化工具，旨在提高前端开发效率和代码质量。它包括了常见的前端开发任务，如编译 SCSS、压缩 CSS/JS、自动添加浏览器前缀、处理图片、提取公共代码等。此外，它还集成了常用的开发工具，如 ESLint、Babel 等。
安装 lfp-rigger
在开始使用 lfp-rigger 之前，需要先安装它。可以通过 npm 安装 lfp-rigger：
npm install lfp-rigger --save-dev
使用 lfp-rigger
初始化
安装成功后，在项目根目录运行 lfp init 命令，可以进行初始化配置，生成配置文件 lfp.js。
npx lfp init
在初始化配置时，可以选择使用 Gulp 或者 Webpack 作为编译工具。如果需要自定义配置，则可以在生成的 lfp.js 文件中进行配置。
开始开发
在初始化配置之后，可以使用以下命令启动 lfp-rigger 进行开发：
npx lfp dev
这个命令会在本地启动一个开发服务器，并编译 SCSS、JS 等文件。同时，它还会监听文件变化，实时编译文件并自动刷新浏览器。
打包发布
当开发完成后，可以使用以下命令打包代码并将其部署到生产环境：
npx lfp build
这个命令会将代码进行优化、压缩、打包等操作，并将生成的文件输出到指定的目录中。你可以将这些文件上传到服务器，完成部署。
配置文件说明
在 lfp.js 中，可以对 lfp-rigger 进行详细的配置。下面简要介绍一下 lfp-rigger 的配置项：
template
用于配置 HTML 模板文件的名称和路径。
template: {
src: '',
dest: 'dist',
filename: 'index.html',
},src：HTML 模板文件的路径。dest：HTML 文件的输出目录，默认为'dist'。filename：HTML 文件的名称，默认为'index.html'。
style
用于配置 SCSS 文件的名称、路径和编译选项。
style: {
src: 'src/styles/**/*.scss',
dest: 'dist/styles',
filename: '[name].[hash:8].css',
clean: false,
sourcemaps: true,
},src：SCSS 文件的路径。dest：编译后 CSS 文件的输出目录，默认为'dist/styles'。filename：编译后 CSS 文件的名称，默认为'[name].[hash:8].css'。clean：是否清除编译后的 CSS 文件，默认为false。sourcemaps：是否生成 sourcemaps，默认为true。
script
用于配置 JS 文件的名称、路径和编译选项。
script: {
src: 'src/scripts/**/*.js',
dest: 'dist/scripts',
filename: '[name].[hash:8].js',
sourcemaps: true,
clean: false,
publicPath: '/',
},src：JS 文件的路径。dest：编译后 JS 文件的输出目录，默认为'dist/scripts'。filename：编译后 JS 文件的名称，默认为'[name].[hash:8].js'。sourcemaps：是否生成 sourcemaps，默认为true。clean：是否清除编译后的 JS 文件，默认为false。publicPath：托管文件的公共路径，默认为'/'。
images
用于配置图片文件的路径和压缩选项。
images: {
src: 'src/images/**/*.{jpg,png,gif}',
dest: 'dist/images',
clean: false,
imagemin: { optimizationLevel: 3, progressive: true, interlaced: true },
},src：图片文件的路径。dest：压缩后图片文件的输出目录，默认为'dist/images'。clean：是否清除压缩后的图片文件，默认为false。imagemin：压缩图片的选项。
fonts
用于配置字体文件的路径。
fonts: {
src: 'src/fonts/**/*.{eot,svg,ttf,woff,woff2}',
dest: 'dist/fonts',
clean: false,
},src：字体文件的路径。dest：输出字体文件的目录，默认为'dist/fonts'。clean：是否清除输出的字体文件，默认为false。
server
用于配置开发服务器的选项。
server: {
port: 8080,
host: 'localhost',
open: true,
https: false,
proxy: null,
},port：服务器的端口号，默认为8080。host：服务器的主机名，默认为'localhost'。open：是否自动打开浏览器，默认为true。https：是否使用 HTTPS 协议，默认为false。proxy：代理服务器的地址，默认为null。
eslint
用于配置 ESLint 的选项。
eslint: {
src: 'src/scripts/**/*.js',
rules: {
'no-unused-vars': 'warn',
'no-console': 'warn',
},
},src：需要检查的文件路径。rules：ESLint 规则，详见 ESLint rules。
babel
用于配置 Babel 的选项。
babel: {
presets: ['@babel/preset-env'],
plugins: [],
},presets：Babel 预设，详见 @babel/preset-env。plugins：Babel 插件，详见 Babel plugins。
webpack
用于配置 Webpack 的选项。
webpack: {
mode: 'production',
entry: {},
output: {},
plugins: [],
},mode：Webpack 的模式，可以是'development'或者'production'。entry：Webpack 的入口文件。output：Webpack 的输出选项。plugins：Webpack 的插件。
示例代码
以下是一个简单的例子，可以快速了解 lfp-rigger 的使用：
-- -------------------- ---- -------
----- - --------- - - ----------------------
----- ------ - --- -----------
--------- -
---- ---------------------------
--
------ -
---- ------------------------
--
------- -
---- ----------------------
--
------- -
---- -----------------------------
--
---
------------------ ----- -- -- -
----- -----------------------
----- ------------------------
----- -------------------------
----------------------
---
-------------------- ----- -- -- -
----- ---------------------
----- ----------------------
----- -------------------------
----- ------------------------
---这个例子包括了三个任务：dev 和 build，分别用于开发和打包。在开发任务中，样式、脚本和图片文件会进行实时编译并存储到内存中，同时启动开发服务器。在打包任务中，它们会被编译、压缩和输出到指定的目录中。通过 rigger.task 方法，我们可以添加自定义的任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005666b81e8991b448e2868