npm 包 lfp-rigger 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前置知识

在开始学习和使用 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

npm 包 lfp-rigger 使用教程