腳手架的作用

通用腳手架Yeoman

• Yeoman是一款腳手架工具扩劝，可以幫助開發(fā)人員創(chuàng)建項目的基礎結構代碼
• yo是yeoman的命令行管理工具，可以在命令行運行yeoman命令
• 生成器：爭對不同的項目生成不同的腳手架

Yeoman使用說明

• 全局安裝yo
  • npm install --global yo
• 安裝generator
  • npm install --global generator-webapp
• 通過yo運行generator
  • mkdir project-name
  • cd project-name
  • yo webapp
• 啟動應用
  • npm run start

自動化構建

• 通過相關的命令構建
• 安裝less插件
  • npm i less -g
• 通過lessc命令轉換
  • lessc input.less output.css

npm script

• npm允許在package.json文件中犁享，使用script字段定義腳本命令
• npm-run-all插件 解決并行執(zhí)行問題
• 安裝插件npm i npm-run-all -D
• 并行執(zhí)行run-p 腳本1 腳本2 腳本3
• 串行執(zhí)行run-s 腳本1 腳本2 腳本3

構建樣式文件

• 構建樣式文件轉換和壓縮
• 找到package.json里的script自動化構建
  • "style": "lessc main.less main.css && minify main.css > main.min.css"

構建腳本文件

• 構建腳本格式和語法
• Babel插件可以將ES6+新語法轉成ES5
  • 安裝：npm install -g babel-core babel-cli
  • 安裝轉碼規(guī)則：npm install -g babel-preset-env
  • 爭對單個文件進行轉換：
    • babel [input.js] -o [output.js]
  • 爭對整個目錄進行轉換
    • babel [src] -d [dist]
• Eslint 可以對js代碼格式進行檢查
  • 初始化項目 npm init --yes
  • 安裝ESLint npm install eslint -g
  • 初始化配置文件 eslint --init
  • 檢查js代碼風格
    • 單個文件 eslint path/filename.js
    • 整個目錄 eslint path/dirname
• StyleLint 可以對css代碼格式進行檢查
  • 初始化項目 npm init --yes
  • 安裝StyleLint npm install --global stylelint
  • 安裝檢測標準 npm install --global stylelint-config-standard
  • 創(chuàng)建規(guī)范文件.stylelintrc.json

自動化構建工具gulp

• 全局安裝gulp客戶端 npm install -g gulp-cli
• 初始化項目 npm init --yes
• 安裝gulp包 npm install gulp -D
• 新建gulpfile文件
• 在gulpfile.js中創(chuàng)建gulp任務
• 執(zhí)行gulp任務 gulp <task-name>

gulp組合任務

//任務的并行執(zhí)行
exports.p = gulp.parallel(task1,task2,task3)
//任務的串行執(zhí)行
exports.s = gulp.series(task1,task2,task3)

利用gulp完成文件傳輸過程

  const gulp = require('gulp')
  const style = () => {
    // 流就是異步操作
    return gulp.src('src/style/index.css').pipe(gulp.dest('dist'))
  }
  module.exports = {
    style
  }

利用gulp對樣式進行構建

• npm i gulp-less -D 將less文件，轉換成css文件
• npm i gulp-clean-css -D 壓縮css代碼
• npm i gulp-rename -D 對文件進行重命名

  const {src,dest} = require('gulp')
  const less = require('gulp-less')
  const cleancss = require('gulp-clean-css')
  const rename = require('gulp-rename')
  
  const style = () => {
    // 流就是異步操作
    return src('src/style/main.less',{base: 'src'})
      .pipe(less())
      .pipe(cleancss())
      .pipe(rename('main.min.css'))
      .pipe(dest('dist'))
  }
  module.exports = {
    style
  }
  

利用gulp對腳本進行構建

• gulp-babel 將ES6新語法轉成ES5
• gulp-uglify 壓縮js代碼
• gulp-rename 對文件進行重命名

利用gulp對圖片進行構建

• gulp-imagemin
• 安裝方式
  • npm i gulp-imagemin -D

利用gulp對html文件進行構建

• gulp-htmlmin 壓縮html

gulp清除文件

• del

發(fā)布服務

• 利用browsersync發(fā)布
• npm i brower-sync -D

gulp使用bootstrap

• 安裝bootstrap依賴
  • npm i bootstrap@3.4.1 jquery -S

gulpfile.js

// 通過 解構 的方式引入函數(shù)
const { src, dest, parallel, series, watch } = require('gulp')
const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin')
const del = require('del')
const browserSync = require('browser-sync')
const bs = browserSync.create()

// 聲明 gulp 任務
const style = () => {
  // 流 就是異步操作
  return src('src/styles/*.less', { base: 'src' })
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(rename({ "extname": ".min.css" }))
    .pipe(dest('dist'))
}

// 聲明 腳本 構建任務
const script = () => {
  return src('src/js/*.js')
    .pipe(babel({
      presets: ['babel-preset-env']
    }))
    .pipe(uglify())
    .pipe(rename({ "extname": ".min.js" }))
    .pipe(dest('dist/scripts'))
}

// 聲明 頁面 的構建任務
const html = () => {
  return src('src/index.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    }))
    .pipe(dest('dist'))
}

// 聲明 圖片 構建任務
const image = () => {
  return src('src/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

// 聲明 文件清除 任務
const clean = () => {
  return del(['dist'])
}

// 聲明 服務發(fā)布 任務
const serve = () => {
  // watch(被監(jiān)視的文件，對應的任務)
  watch('src/index.html', html)
  watch('src/styles/*.less', style)
  watch('src/js/*.js', script)
  watch('src/images/**', image)

  // 初始化服務
  bs.init({
    notify: false,      // 禁用 瀏覽器 右上角的 browserSync connected 提示框
    files: 'dist/**',   // 監(jiān)視 dist 下 文件的變化塞椎，然后在瀏覽器上實時更新
    server: {
      baseDir: './dist', // 指定服務啟動的目錄
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// 組合任務
const build = parallel(style, script, html, image)
const dev = series(clean, build, serve)

// 導出任務
module.exports = {
  build,
  dev,
  serve
}