前端工程化

1. Yeoman

安装Yeoman

yarn global add yo
npm install yo -g

安装generator

yarn global add generator-node
npm install generator -g

通过yo运行generator

mkdir my-module
cd my-module
yo node

在原有项目上添加一些配置(Sub Generator)，比如cli

yo node:cli

Yeoman使用步骤：

1.明确你的需求;
2.找到合适的Generator;
3.全局范围安装找到的Generator;
4.通过 Yo运行对应的Generator;
5.通过命令行交互填写选项;
6.生成你所需要的项目结构;

创建自定义Generator模块
Generator本质上就是一个npm模块

image.png

名字格式必须为： generator-<name>

mkdir generator-simple
cd generator-simple
yarn init
yarn add yeoman-generator
yarn link 链接到全局，使之成为全局模块包

使用

yo simple

输出模版如果需要转义<，需要在后面再加个%

<link rel="icon" href="<%%= BASE_URL %>favicon.ico">

发布：如果遇到镜像问题无法发布，在发布时指定镜像源即可

yarn publish --registry=https://registry.yarnpkg.com

2. Plop

plop npm地址
安装：

yarn add plop --dev

使用：

yarn plop <name>

● 将plop模块作为项目开发依赖安装
● 在项目根目录下创建一个plopfile.js文件
● 在plopfile.js文件中定义脚手架任务
● 编写用于生成特定类型文件的模板
● 通过Plop提供的CLI运行脚手架任务

demo:

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.hbs'
      },
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.hbs'
      }
    ]
  })
}

3. Grunt

安装：

yarn add grunt

使用：

yarn grunt foo

4. Gulp

4.1 创建一个任务

gulp 的任务函数都是异步的
可以通过调用回调函数标识任务完成

exports.foo = done => {
  console.log('foo task working~')
  done() // 标识任务执行完成
}

运行：

yarn gulp foo

4.2 默认任务(运行时可以省略任务名参数)

exports.default = done => {
  console.log('default task working~')
  done()
}

4.3 v4.0 之前需要通过 gulp.task() 方法注册任务

const gulp = require('gulp')

gulp.task('bar', done => {
  console.log('bar task working~')
  done()
})

4.4 串行，并行：

const task1 = done => {
  setTimeout(() => {
    console.log('task1 working~')
    done()
  }, 1000)
}

const task2 = done => {
  setTimeout(() => {
    console.log('task2 working~')
    done()
  }, 1000)  
}

const task3 = done => {
  setTimeout(() => {
    console.log('task3 working~')
    done()
  }, 1000)  
}

串行：series()

exports.foo = series(task1, task2, task3)

并行： parallel()

exports.bar = parallel(task1, task2, task3)

4.5 异步任务：

image.png

4.6 封装

新建bin目录，在目录下新建zce-pages.js

#!/usr/bin/env node

process.argv.push('--cwd')
process.argv.push(process.cwd())
process.argv.push('--gulpfile')
process.argv.push(require.resolve('..'))

require('gulp/bin/gulp')

新建lib目录，在lib目录下新建index.js

const { src, dest, parallel, series, watch } = require('gulp')

const del = require('del')
const browserSync = require('browser-sync')

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = browserSync.create()
const cwd = process.cwd()
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/**'
    }
  }
}

try {
  const loadConfig = require(`${cwd}/pages.config.js`)
  config = Object.assign({}, config, loadConfig)
} catch (e) {}

const clean = () => {
  return del([config.build.dist, config.build.temp])
}

const style = () => {
  return src(config.build.paths.styles, { base: config.build.src, cwd: config.build.src })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload({ stream: true }))
}

const script = () => {
  return src(config.build.paths.scripts, { base: config.build.src, cwd: config.build.src })
    .pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload({ stream: true }))
}

const page = () => {
  return src(config.build.paths.pages, { base: config.build.src, cwd: config.build.src })
    .pipe(plugins.swig({ data: config.data, defaults: { cache: false } }))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload({ stream: true }))
}

const image = () => {
  return src(config.build.paths.images, { base: config.build.src, cwd: config.build.src })
    .pipe(plugins.imagemin())
    .pipe(dest(config.build.dist))
}

const font = () => {
  return src(config.build.paths.fonts, { base: config.build.src, cwd: config.build.src })
    .pipe(plugins.imagemin())
    .pipe(dest(config.build.dist))
}

const extra = () => {
  return src('**', { base: config.build.public, cwd: config.build.public })
    .pipe(dest(config.build.dist))
}

const serve = () => {
  watch(config.build.paths.styles, { cwd: config.build.src }, style)
  watch(config.build.paths.scripts, { cwd: config.build.src }, script)
  watch(config.build.paths.pages, { cwd: config.build.src }, page)
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)
  watch([
    config.build.paths.images,
    config.build.paths.fonts
  ], { cwd: config.build.src }, bs.reload)

  watch('**', { cwd: config.build.public }, bs.reload)

  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: 'dist/**',
    server: {
      baseDir: [config.build.temp, config.build.dist, config.build.public],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

const useref = () => {
  return src(config.build.paths.pages, { base: config.build.temp, cwd: config.build.temp })
    .pipe(plugins.useref({ searchPath: [config.build.temp, '.'] }))
    // html js css
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(dest(config.build.dist))
}

const compile = parallel(style, script, page)

// 上线之前执行的任务
const build =  series(
  clean,
  parallel(
    series(compile, useref),
    image,
    font,
    extra
  )
)

const develop = series(compile, serve)

module.exports = {
  clean,
  build,
  develop
}

在package.json中添加

"files": [
    "lib",
    "bin"
],
"main": "lib/index.js",
"bin": "bin/zce-pages.js",

发布以后就可以在项目中安装
更详细版：x-pages

5. fis3

yarn global add fis3