開發腳手架及封裝自動化構建工作流

主要解決的問題

工程化表現

常用的腳手架工具

vue.js 專案 ----> vue-cli

angular 專案 ----> angular-cli

yeoman

plop

yeoman

yeoman - sub generator

yo node:cli

yarn link //全域性使用
yarn 
my-module --help

自定義 generator

建立 generator模組

根據模板建立檔案

接收使用者輸入資料

prompting () 

]).then(answers => 
this.answers = answers
})}

plop 的具體使用

npm scripts: 實現自動化構建工作流的最簡單方式

常用的自動化構建工具

grunt

module.exports = grunt => 

})grunt.loadnpmtasks('grunt-contrib-clean')
}

grunt常用外掛程式

const sass = require('sass')

const loadgrunttasks = require('load-grunt-tasks')
module.exports = grunt => ,
main: }},
babel: ,
main: }},
watch: ,
css: }})
// grunt.loadnpmtasks('grunt-sass')
loadgrunttasks(grunt) // 自動載入所有的 grunt 外掛程式中的任務
grunt.registertask('default', ['sass', 'babel', 'watch'])
}

grunt常用外掛程式總結：

gulp

構建過程核心工作原理

gulp 檔案操作 api + 外掛程式的使用

```

// src 讀取流 dest 寫入流
const  = require('gulp')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
.pipe(rename())
exports.default = () => 
```

封裝自動化構建工作流

fis

開發構建腳手架命令列工具總結

我們這一章節呢，來總結下構建腳手架的基本過程，總的來說呢，過程也是相當愉快輕鬆的，愉快，心情完美 首先我們需要安裝構建腳手架所需要的依賴，如下 cnpm install d commander inquirer chalk ora download git repo核心工具 commander in...

前端開發使用vue腳手架快速構建前端專案

vue 提供了乙個官方的 cli，為單頁面應用 spa 快速搭建繁雜的腳手架。node v 檢測是否安裝成功npm install g vue cli vue version 檢測是否安裝成功 vue init webpack 資料夾名稱runtime compiler recommended fo...

React開發環境搭建及腳手架構建目錄介紹 一

首先安裝node，node安裝好之後，你就可以使用npm命令來安裝腳手架工具了，方法很簡單，只要開啟終端，然後輸入下面的命令就可以了。腳手架安裝好以後，就可以建立專案了，首先建立乙個reactdemo資料夾，然後進入這個資料夾，建立新的react專案。cd demo01 等建立完成後，進入專案目錄 ...