npm 包 gulp-stylus 使用教程

gulp-stylus 是一个基于 Gulp 构建工具的 npm 包，用于将 Stylus 预处理器编译成 CSS。本文将介绍如何使用 gulp-stylus，并提供一些示例代码和最佳实践。

安装

首先，需要在项目目录下安装 gulp 和 gulp-stylus：

npm install --save-dev gulp gulp-stylus

基础用法

接下来，在项目根目录下创建一个名为 "gulpfile.js" 的文件，并输入以下代码：

const gulp = require('gulp');
const stylus = require('gulp-stylus');

gulp.task('styles', () => {
  return gulp.src('src/stylus/*.styl')
    .pipe(stylus())
    .pipe(gulp.dest('dist/css'));
});

上述代码定义了一个名为 "styles" 的任务，它将 src/stylus 目录下的所有 ".styl" 文件编译成 CSS，并将编译结果输出到 dist/css 目录下。

要运行该任务，只需在命令行中输入：

gulp styles

高级用法

除了基础用法外，gulp-stylus 还提供了许多高级功能，例如：

压缩 CSS

可以使用 clean-css 插件压缩生成的 CSS：

const cleanCSS = require('gulp-clean-css');

gulp.task('styles:minify', () => {
  return gulp.src('src/stylus/*.styl')
    .pipe(stylus())
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

模块导入

与 Sass 类似，Stylus 也支持模块导入。可以使用 nib 插件来导入常见的 CSS3 样式：

const nib = require('nib');

gulp.task('styles:nib', () => {
  return gulp.src('src/stylus/*.styl')
    .pipe(stylus({ use: nib() }))
    .pipe(gulp.dest('dist/css'));
});

自定义函数

可以使用 axis 插件自定义 Stylus 函数：

const axis = require('axis');

gulp.task('styles:axis', () => {
  return gulp.src('src/stylus/*.styl')
    .pipe(stylus({ use: axis() }))
    .pipe(gulp.dest('dist/css'));
});

最佳实践

最后，提供一些使用 gulp-stylus 的最佳实践：

• 按文件类型组织源代码：例如，将 ".styl" 文件放在 "src/stylus" 目录下。
• 使用 gulp-plumber 插件避免编译错误中断任务执行。
• 在开发环境中生成未压缩的 CSS，在生产环境中生成压缩后的 CSS。

-- -------------------- ---- -------
----- ------- - ------------------------
----- ------ - -----------------------
----- ----------- - -------------------- -- --------------

------------------- -- -- -
  --- ------ - -----------------------------
    ----------------
    ----------------

  -- ------------ --- ------------- -
    ------ - ------------------------
  -

  ------ -------------------- ------- ------ ---
    -----------------------------
---

结论

gulp-stylus 是一个功能强大的 npm 包，可用于简化前端开发中的 CSS 编写和管理工作。通过本文的介绍，您现在应该已经掌握了基本的使用方法和一些高级技巧，希望对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51907