自动化构建

脚手架的作用

通用脚手架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 <task-name>
  • 
    

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 bootstrap@3.4.1 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
}