Gulp Project

文档阅读

Gulp

• Gulp
• Browsersync + Gulp.js

cd src/mygulp/
npm i
npm run dev

Gulp-v4

Gulp@4 版本详情：Demo。

比如：Hexo 博客中压缩文件配置

const path = require("path");
const { src, dest, series } = require("gulp");
const uglify = require("gulp-uglify");
const htmlmin = require("gulp-htmlmin");
const htmlclean = require("gulp-htmlclean");
const minifyCss = require("gulp-clean-css");
const imagemin = require("gulp-imagemin");
const babel = require("gulp-babel");
// const useref = require('gulp-useref');
// const gulpif = require('gulp-if');

const destPath = path.join(__dirname, "public");

function minifyHtml() {
  return src(destPath + "/**/*.html")
    .pipe(htmlclean())
    .pipe(
      htmlmin({
        collapseWhitespace: true,
        removeComments: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        removeTagWhitespace: true,
        removeEmptyAttributes: true,
        minifyCSS: true,
        minifyJS: true,
        sortAttributes: true,
        sortClassName: true,
        useShortDoctype: true
      })
    )
    .pipe(dest(destPath));
}

function minifyStyle() {
  return src(destPath + "/**/*.css")
    .pipe(minifyCss({ compatibility: "ie8" }))
    .pipe(dest(destPath));
}

function minifyJs() {
  return src(destPath + "/js/**/*.js")
    .pipe(
      babel({
        presets: ["@babel/env"]
      })
    )
    .pipe(uglify())
    .pipe(dest(destPath + "/js"));
}

function minifyImg() {
  return src(destPath + "/img/**/*.*")
    .pipe(imagemin())
    .pipe(dest(destPath + "/img"));
}

exports.html = minifyHtml;
exports.js = minifyJs;
exports.css = minifyStyle;
exports.img = minifyImg;
exports.build = series(minifyHtml, minifyStyle, minifyJs, minifyImg);

Gulp-v3

Gulp@3 版本gulpfile.js 配置：只使用了 browser-sync 插件来监控 html/css/js 文件的变化，并自动刷新浏览器页面。

var gulp = require("gulp");
var browserSync = require("browser-sync").create();

gulp.task("browser-sync", function() {
  browserSync.init({
    server: {
      baseDir: "./src",
      directory: true
    },
    notify: false
  });
  gulp.watch("src/**/*.js").on("change", browserSync.reload);
  gulp.watch("src/**/*.css").on("change", browserSync.reload);
  gulp.watch("src/**/*.html").on("change", browserSync.reload);
});

gulp.task("default", ["browser-sync"]);

Learning Document

MyWebpack

cd src/tool/_webpack/
npm i
npm start

MyRollup

• rollup 功能单一，webpack 功能强大
• 参考设计原则和《Linux/Unix 设计思想》
• 工具要尽量功能单一，可集成，可扩展
• gulp + rollup

mkdir myrollup
cd myrollup

# 初始化
npm init

# 下载依赖包
npm i rollup-plugin-node-resolve rollup-plugin-babel babel-core babel-plugin-external-helpers babel-preset-latest --save-dev

# 配置文件
touch .babelrc rollup.config.js

关于 JS 众多模块化标准

• 没有模块化
• AMD 成为标准，require.js(也有 CMD)
• 前端打包工具，是 node.js 模块化（Commonjs 规范）可以被使用
• ES6 出现，想统一现在所有模块化标准
• nodejs 积极支持，浏览器尚未统一

模块化

• 语法：import export(注意有无 default)
• 环境：babel 编译 ES6 语法，模块化可用 webpack 和 rollup
• 扩展：对模块化标准统一的期待

Riot

• Riot.js 框架深入解析
• riot.js 教程【一】简介
• RIOT文档

其他

docsify 无需构建快速生成文档网站

比如：本站，Github：docsify

Quick start

npm i docsify-cli -g

Initialize

If you want to write the documentation in the ./docs subdirectory, you can use the init command.

docsify init ./docs

我的配置：

window.$docsify = {
  name: "project",
  loadSidebar: true,
  subMaxLevel: 2,
  alias: {
    "/.*/_sidebar.md": "/docs/_sidebar.md"
  }
};