web-compile

一个用于编译/压缩SCSS & JS的CLI，以及相关的pre-commit钩子。

这个CLI是围绕libsass-python，rJSmin和jinja2的小型包装，也旨在与pre-commit兼容，并提供pre-commit钩子。

注意：该软件包处于alpha版本，但看起来按预期工作，将在sphinx-panels中进行测试，然后是sphinx-book-theme。

安装

直接作为CLI使用

pip install web-compile
web-compile --help

通过pre-commit使用

添加到你的.pre-commit-config.yaml

-   repo: https://github.com/executablebooks/web-compile
    rev: v0.2.0
    hooks:
      - id: web-compile
        # optional
        args: [--config=config.yml]
        files: >-
            (?x)^(
                web-compile-config.yml|
                src/.*|
                dist/.*
            )$

默认情况下，钩子将针对所有文本文件更改启动。但建议将此限制为已知的配置文件和输入/输出文件夹。

配置

您可以直接通过CLI或使用配置文件进行编译配置；只需将-替换为_，CLI优先于文件

$ web-compile --help
Usage: web-compile [OPTIONS]

  Compile web assets.

Options:
  --version                       Show the version and exit.
  -c, --config FILE               Allowed extensions: json, toml, yml, yaml
                                  [default: web-compile-config.yml]

  --sass-files DICT               File mapping (config only)
  --sass-format [nested|expanded|compact|compressed]
                                  [default: compressed]
  --sass-precision INTEGER        precision for numbers.  [default: 5]
  --sass-sourcemap                Output source map.
  --sass-encoding TEXT            [default: utf8]
  --js-files DICT                 File mapping (config only)
  --js-comments                   Keep comments starting with '/*!'.
  --js-encoding TEXT              [default: utf8]
  --jinja-files DICT              File mapping (config only)
  --jinja-variables DICT          Global variable mapping (config only)
  --jinja-encoding TEXT           [default: utf8]
  --git-add / --no-git-add        Add new files to git index.  [default: True]
  --continue-on-error             Do not stop on the first error.
  --exit-code INTEGER             Exit code when files changed.  [default: 3]
  --test-run                      Do not delete/create any files.
  -q, --quiet                     Remove stdout logging.
  -v, --verbose                   Increase stdout logging.
  --help                          Show this message and exit.

--config可以指向三种文件格式中的任何一种

config.yml/config.yaml

web-compile:
  sass:
    encoding: utf8
    files:
      tests/example_src/example1.scss: tests/example_dist/example1.[hash].css
      tests/example_src/example2.scss: tests/example_dist/example2.[hash].css
    format: compressed
    precision: 5
    sourcemap: true
  js:
    comments: false
    encoding: utf8
    files:
      tests/example_src/example1.js: tests/example_dist/example1.[hash].js
  jinja:
    files:
      tests/example_src/example1.j2: tests/example_dist/example1.txt
      tests/example_src/example3.j2: tests/example_dist/example3.txt
    variables:
      a: b
  continue_on_error: true
  exit_code: 2
  test_run: false
  verbose: false
  quiet: false

config.toml:

[web-compile]
exit_code = 2
verbose = false
test_run = false
continue_on_error = true
quiet = false

[web-compile.sass]
precision = 5
sourcemap = true
format = "compressed"
encoding = "utf8"

[web-compile.js]
comments = false
encoding = "utf8"

[web-compile.sass.files]
"tests/example_src/example1.scss" = "tests/example_dist/example1.[hash].css"
"tests/example_src/example2.scss" = "tests/example_dist/example2.[hash].css"

[web-compile.js.files]
"tests/example_src/example1.js" = "tests/example_dist/example1.[hash].js"

[web-compile.jinja.files]
"tests/example_src/example1.j2" = "tests/example_dist/example1.txt"
"tests/example_src/example3.j2" = "tests/example_dist/example3.txt"

[web-compile.jinja.variables]
a = "b"

config.json:

{
  "web-compile": {
    "sass": {
      "files": {
        "tests/example_src/example1.scss": "tests/example_dist/example1.[hash].css",
        "tests/example_src/example2.scss": "tests/example_dist/example2.[hash].css"
      },
      "precision": 5,
      "sourcemap": true,
      "format": "compressed",
      "encoding": "utf8"
    },
    "js": {
      "files": {
        "tests/example_src/example1.js": "tests/example_dist/example1.[hash].js"
      },
      "comments": false,
      "encoding": "utf8"
    },
    "jinja": {
      "files": {
        "tests/example_src/example1.j2": "tests/example_dist/example1.txt",
        "tests/example_src/example3.j2": "tests/example_dist/example3.txt"
      },
      "variables": {
        "a": "b"
      }
    },
    "exit_code": 2,
    "verbose": false,
    "test_run": false,
    "continue_on_error": true,
    "quiet": false
  }
}

用法

SCSS编译

将源 SCSS 文件简单地映射到输出 CSS 文件名。路径应相对于配置文件，并且导入的 @import 和 @use 的部分文件也将被读取。

web-compile:
  sass:
    files:
      src/file.scss: dist/file.css

$ web-compile

src/
    _partial.scss
    file.scss
dist/
    file.css

如果使用 sourcemap 选项，则还会输出源映射，并在 CSS 中添加 sourceMappingURL 注释。

web-compile:
  sass:
    files:
      src/file.scss: dist/file.css
    sourcemap: true

$ web-compile

dist/
    file.css
    file.scss.map.json

如果将 [hash] 添加到 CSS 文件名中，则它将被内容哈希替换。同时，任何现有的匹配该模式的文件（具有不同的哈希值）将被删除。

web-compile:
  sass:
    files:
      src/file.scss: dist/file.[hash].css

$ web-compile

dist/
    file.beabd761a3703567b4ce06c9a6adde55.css

JavaScript

JavaScript 文件被压缩，并且其配置与 SCSS 类似。

web-compile:
  js:
    files:
      src/file.js: dist/file.[hash].js

$ web-compile

dist/
    file.beabd761a3703567b4ce06c9a6adde55.js

Jinja 模板

可以从 Jinja 模板创建文件。这些文件在 SCSS 和 JS 文件编译之后创建。此外，它们可以与为该工具设计的两个 Jinja 过滤器结合使用。

• compiled_name 将输入文件路径转换为编译后的文件名。
• hash 将返回可以插入任何位置的文件名哈希。

src/file.j2:

{{ "src/file.scss" | compiled_name }}
{{ "src/file.scss" | compiled_name }}?digest={{ "src/file.scss" | hash }}
{{ var1 }}

web-compile:
  sass:
    files:
      src/file.scss: dist/file.[hash].css
  jinja:
    files:
      src/file.j2: dist/file.txt
    variables:
      var1: other

$ web-compile

dist/file.txt:

file.beabd761a3703567b4ce06c9a6adde55.css
file.beabd761a3703567b4ce06c9a6adde55.css?digest=beabd761a3703567b4ce06c9a6adde55
other

开发

运行测试

pip install tox
tox -e py37

测试 CLI

tox -e py37-cli

测试 pre-commit 钩子

tox -e try-repo

代码风格

pip install pre-commit
pre-commit run --all