前端工程化 - 簡書

1. Yeoman

安裝Yeoman

yarn global add yo
npm install yo -g

安裝generator

yarn global add generator-node
npm install generator -g

通過yo運(yùn)行g(shù)enerator

mkdir my-module
cd my-module
yo node

在原有項(xiàng)目上添加一些配置(Sub Generator)凿试，比如cli

yo node:cli

Yeoman使用步驟：

1.明確你的需求;
2.找到合適的Generator;
3.全局范圍安裝找到的Generator;
4.通過 Yo運(yùn)行對(duì)應(yīng)的Generator;
5.通過命令行交互填寫選項(xiàng);
6.生成你所需要的項(xiàng)目結(jié)構(gòu);

創(chuàng)建自定義Generator模塊
Generator本質(zhì)上就是一個(gè)npm模塊

image.png

名字格式必須為： generator-<name>

mkdir generator-simple
cd generator-simple
yarn init
yarn add yeoman-generator
yarn link 鏈接到全局，使之成為全局模塊包

使用

yo simple

輸出模版如果需要轉(zhuǎn)義<酬荞，需要在后面再加個(gè)%

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

發(fā)布：如果遇到鏡像問題無法發(fā)布蛹磺，在發(fā)布時(shí)指定鏡像源即可

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

2. Plop

plop npm地址
安裝：

yarn add plop --dev

使用：

yarn plop <name>

● 將plop模塊作為項(xiàng)目開發(fā)依賴安裝
● 在項(xiàng)目根目錄下創(chuàng)建一個(gè)plopfile.js文件
● 在plopfile.js文件中定義腳手架任務(wù)
● 編寫用于生成特定類型文件的模板
● 通過Plop提供的CLI運(yùn)行腳手架任務(wù)

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 創(chuàng)建一個(gè)任務(wù)

gulp 的任務(wù)函數(shù)都是異步的
可以通過調(diào)用回調(diào)函數(shù)標(biāo)識(shí)任務(wù)完成

exports.foo = done => {
  console.log('foo task working~')
  done() // 標(biāo)識(shí)任務(wù)執(zhí)行完成
}

運(yùn)行：

yarn gulp foo

4.2 默認(rèn)任務(wù)(運(yùn)行時(shí)可以省略任務(wù)名參數(shù))

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

4.3 v4.0 之前需要通過 gulp.task() 方法注冊(cè)任務(wù)

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 異步任務(wù)：

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)

// 上線之前執(zhí)行的任務(wù)
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",

發(fā)布以后就可以在項(xiàng)目中安裝
更詳細(xì)版：x-pages

5. fis3

yarn global add fis3