npm 包 gulp-kcode 使用教程

在前端开发中，自动化构建已经成为了不可或缺的一部分。而 Gulp 作为一个流程自动化工具，相比其他的构建工具，具有使用简单，插件丰富等特点，深受前端开发人员的青睐。而 npm 包 gulp-kcode 则是针对前端开发中常用的支持 ES6、Less、PostCSS 等语法的Gulp插件，下面将详细介绍这个插件的使用教程。

安装 gulp-kcode

在使用 gulp-kcode 之前，需要先安装 gulp 和对应的依赖包。如果您还没有安装 gulp，则需先安装，然后再安装 gulp-kcode 插件。

npm install gulp -g

npm install gulp-kcode --save-dev

注：gulp-kcode 依赖 Node.js V4 版本以上。

gulp-kcode 配置

在 gulpfile.js 中的样例配置如下：

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

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

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

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

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

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

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

上述配置中，styles、scripts、images 都是合并压缩文件的任务，其中 styles 任务使用了 kcode.less() 编译 Less，kcode.postcss() 使用浏览器前缀自动增加器，kcode.minifyCss() 压缩 CSS 文件；scripts 任务使用了 kcode.babel() 编译 ES6 语法，kcode.jshint() 检查代码，kcode.uglify() 压缩 JS 文件。

运行任务

在控制台默认执行 tasks 任务：

gulp

同时，可以使用watch任务对编译过程进行监控：

gulp watch

kcode API

本节将详细介绍 kcode 的全部 API。

kcode.babel(options)

使用 Babel 编译 es6 编写的 JS 文件。

gulp.task('scripts', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(kcode.babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('./dist/scripts'));
});

kcode.browserify(options)

使用 Browserify 打包管理 JS 依赖，支持 CommonJS 模块。

gulp.task('scripts', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(kcode.browserify())
    .pipe(gulp.dest('./dist/scripts'));
});

kcode.concat(options)

使用 gulp-concat 合并文件，可以设置文件名和路径。

gulp.task('scripts', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(kcode.concat('index.js'))
    .pipe(gulp.dest('./dist/scripts'));
});

kcode.imagemin(options)

压缩图片文件。

gulp.task('images', function() {
  return gulp.src('./src/images/*')
    .pipe(kcode.imagemin())
    .pipe(gulp.dest('./dist/images'));
});

kcode.jshint(options)

使用 JSHint 进行代码检查，可以自定义 JSHint 配置。

gulp.task('scripts', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(kcode.jshint())
    .pipe(gulp.dest('./dist/scripts'));
});

kcode.less(options)

编译 Less 文件。

gulp.task('styles', function() {
  return gulp.src('./src/styles/*.less')
    .pipe(kcode.less())
    .pipe(gulp.dest('./dist/styles'));
});

kcode.minifyCss(options)

压缩 CSS 文件。

gulp.task('styles', function() {
  return gulp.src('./src/styles/*.less')
    .pipe(kcode.less())
    .pipe(kcode.minifyCss())
    .pipe(gulp.dest('./dist/styles'));
});

kcode.postcss(plugins)

使用 PostCSS 进行预处理和后处理。

gulp.task('styles', function() {
  return gulp.src('./src/styles/*.less')
    .pipe(kcode.less())
    .pipe(kcode.postcss([
      require('autoprefixer')()
    ]))
    .pipe(gulp.dest('./dist/styles'));
});

kcode.uglify(options)

压缩 JS 文件。

gulp.task('scripts', function() {
  return gulp.src('./src/scripts/*.js')
    .pipe(kcode.babel())
    .pipe(kcode.jshint())
    .pipe(kcode.uglify())
    .pipe(gulp.dest('./dist/scripts'));
});

结尾

通过本文，我们了解了 npm 包 gulp-kcode 的安装，配置和使用教程，以及 kcode 中各 API 的详细用法，学完本篇文章，相信读者已经可以使用 gulp-kcode 进行前端开发中的自动化构建工作了。

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