自动化构建

脚手架的作用

通用脚手架Yeoman

• Yeoman是一款脚手架工具，可以帮助开发人员创建项目的基础结构代码
• 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插件 解决并行执行问题
• 安装插件npm i npm-run-all -D
• 并行执行run-p 脚本1 脚本2 脚本3
• 串行执行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
  • 安装转码规则：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
  • 创建规范文件.stylelintrc.json

自动化构建工具gulp

• 全局安装gulp客户端 npm install -g gulp-cli
• 初始化项目 npm init --yes
• 安装gulp包 npm install gulp -D
• 新建gulpfile文件
• 在gulpfile.js中创建gulp任务
• 执行gulp任务 gulp

gulp组合任务

//任务的并行执行
exports.p = gulp.parallel(task1,task2,task3)
//任务的串行执行
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

发布服务

• 利用browsersync发布
• npm i brower-sync -D

gulp使用bootstrap

• 安装bootstrap依赖
  • npm i [email protected] jquery -S

gulpfile.js

// 通过 解构 的方式引入函数
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'])
}

// 声明 服务发布 任务
const serve = () => {
  // watch(被监视的文件，对应的任务)
  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/**',   // 监视 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
}