作业三

野性酷女 2023-01-05 14:21 28阅读 0赞

# 谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。 #

前端工程化就是通过一定的标准和规范来提高开发效率的一种手段，一切一降低成本 质量保证，提高效率为目的 的都属于前段的工程化

*  解决重复的工作：上线前部署代码压缩文件打包文件等等
 *  解决代码风格各个程序员不统一的 问题
 *  解决部分功能需要等待后端的接口才能进行开发
 *  解决无法使用模块化和组件化的代码
 *  解决真正意义上实现了前后端的完全分离

# 2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？ #

脚手架可以帮我们快速生成项目，统一代码风格，创建项目基础结构，给开发者提供约束和规范，有利于维护打包

# 编程题 #

## 1.概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具 ##

工作原理：在生成项目的时候，会询问一些问题，根据预设的问题生成对应的项目

1.  创建项目QH-Demo
2.  创建pakeage.json
    
        yarn init --yes
3.  修改package.json
    
        { 
            "name": "qh-demo",
            "version": "1.0.0",
            "bin": "cli.js",
            "main": "index.js",
            "license": "MIT"
        }
4.  安装依赖模块
    
        yarn add inquirer   //询问
         yarn add ejs  //添加模板引擎
5.  设置模板
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>qh-demo</title>
        </head>
        
        <body></body>
        
        </html>
6.  关联全局并测试
    
        yarn link
    
        mkdir quheng
        cd quheng
        qu-demo
7.  github地址
    
    https://github.com/innerHTML123/qu-demo/

## 2.使用Gulp完成项目自动化构建 ##

1.  创建目录并初始化pakeage.json
    
        mkdir qh-gulp
        cd qh-gulp
        yarn init --yes
2.  安装gulp模块
    
        yarn add gulp --dev
3.  安装所需要的模块
    
        yarn add
4.  添加gulpfile.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 data = { 
      menus: [
        { 
          name: 'Home',
          icon: 'aperture',
          link: 'index.html'
        },
        { 
          name: 'Features',
          link: 'features.html'
        },
        { 
          name: 'About',
          link: 'about.html'
        },
        { 
          name: 'Contact',
          link: '#',
          children: [
            { 
              name: 'Twitter',
              link: 'https://twitter.com/w_zce'
            },
            { 
              name: 'About',
              link: 'https://weibo.com/zceme'
            },
            { 
              name: 'divider'
            },
            { 
              name: 'About',
              link: 'https://github.com/zce'
            }
          ]
        }
      ],
      pkg: require('./package.json'),
      date: new Date()
    }
    
    const clean = () => { 
      return del(['dist', 'temp'])
    }
    
    const style = () => { 
      return src('src/assets/styles/*.scss', {  base: 'src' })
        .pipe(plugins.sass({  outputStyle: 'expanded' }))
        .pipe(dest('temp'))
        .pipe(bs.reload({  stream: true }))
    }
    
    const script = () => { 
      return src('src/assets/scripts/*.js', {  base: 'src' })
        .pipe(plugins.babel({  presets: ['@babel/preset-env'] }))
        .pipe(dest('temp'))
        .pipe(bs.reload({  stream: true }))
    }
    
    const page = () => { 
      return src('src/*.html', {  base: 'src' })
        .pipe(plugins.swig({  data, defaults: {  cache: false } })) // 防止模板缓存导致页面不能及时更新
        .pipe(dest('temp'))
        .pipe(bs.reload({  stream: true }))
    }
    
    const image = () => { 
      return src('src/assets/images/**', {  base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
    }
    
    const font = () => { 
      return src('src/assets/fonts/**', {  base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
    }
    
    const extra = () => { 
      return src('public/**', {  base: 'public' })
        .pipe(dest('dist'))
    }
    
    const serve = () => { 
      watch('src/assets/styles/*.scss', style)
      watch('src/assets/scripts/*.js', script)
      watch('src/*.html', page)
      // watch('src/assets/images/**', image)
      // watch('src/assets/fonts/**', font)
      // watch('public/**', extra)
      watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
      ], bs.reload)
    
      bs.init({ 
        notify: false,
        port: 2080,
        // open: false,
        // files: 'dist/**',
        server: { 
          baseDir: ['temp', 'src', 'public'],
          routes: { 
            '/node_modules': 'node_modules'
          }
        }
      })
    }
    
    const useref = () => { 
      return src('temp/*.html', {  base: 'temp' })
        .pipe(plugins.useref({  searchPath: ['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('dist'))
    }
    
    const compile = parallel(style, script, page)
    
    // 上线之前执行的任务
    const build =  series(
      clean,
      parallel(
        series(compile, useref),
        image,
        font,
        extra
      )
    )
    
    const develop = series(compile, serve)
    
    module.exports = { 
      clean,
      build,
      develop
    }

1.  github 地址
    
    https://github.com/innerHTML123/quheng-work-demo/