Gulp CLI

1. 创建一个空项目srs-pages

yarn global add caz
caz nm srs-pages #使用caz脚手架生成一个空项目

2. 把lib/index.js放入之前的gulpfile文件，并修改package.json。

 "dependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "browser-sync": "2.26.7",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "7.1.0",
    "gulp-load-plugins": "^2.0.7",
    "gulp-sass": "^5.0.0",
    "gulp-swig": "^0.9.1",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^5.0.0",
    "sass": "^1.45.1"
  }

3. 安装依赖包，同时生成全局链接

yarn
yarn link

4.清除原来的项目中gulpfile.js 和 package.json
5.在原来项目引入依赖并安装

yarn link "srs-pages" 
yarn

6. 运行yarn build

报错，原因是原来的项目nodemodule里面没有gulp命令了，

7. 原来项目添加gulp命令yarn add gulp --dev (发布之后就不需要安装了), 再次运行yarn build。

报错，原因是srs-pages项目data里面使用了'./package.json'

image.png

8.约定大于配置, 原项目中新建pages.config.js，用于抽取配置

module.exports = {
  data: {
     /*省略*/
  }
}

presets: ['@babel/preset-env']变成 presets: [require('@babel/preset-env')]

9. 再次运行yarn build，成功。

10. 抽取路径配置

let config = {
  // default config
  build: {
    src: 'src',
    dist: 'dist',
    temp: 'temp',
    public: 'public',
    paths: {
      styles: 'assets/styles/*.scss',
      scripts: 'assets/scripts/*.js',
      pages: '*.html',
      images: 'assets/images/**',
      fonts: 'assets/fonts/**'
    }
  }
}

11. 整体打包Gulp

• 移除原项目中gulpfile.js文件，尝试使用命令指定路径 和 工作目录
  yarn gulp build --gulpfile ./node_modules/srs-pages/lib/index.js --cwd .
  （目录默认生成在glupfile的目录中, 这里设置为当前目录）

• package.json里面配置CLI命令："bin": "bin/srs-pages.js"

• 重新yarn link, 让CLI命令也可以全局使用

12. 发布

• 根目录文件和 package.json里面file配置文件夹一起发布
  "files": [ "lib", "bin" ]
• git代码提交
• yarn publish

淘宝镜像同步不及时的问题：
https://npm.taobao.org/

13. 项目中使用

• yarn add srs-pages --dev
• "scripts": {
  "clean": "srs-pages clean",
  "build": "srs-pages build",
  "develop": "srs-pages develop"
  },
• yarn develop