作业三

最新推荐文章于 2022-05-09 22:38:59 发布

落花有意，树无情

最新推荐文章于 2022-05-09 22:38:59 发布

阅读量219

点赞数

分类专栏： # javascript

本文链接：https://blog.csdn.net/q918922703_1/article/details/112552573

版权

javascript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

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

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

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

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

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

编程题

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

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

创建项目QH-Demo
创建pakeage.json
```
yarn init --yes
```

修改package.json

{
    "name": "qh-demo",
    "version": "1.0.0",
    "bin": "cli.js",
    "main": "index.js",
    "license": "MIT"
}

安装依赖模块

 yarn add inquirer   //询问
 yarn add ejs  //添加模板引擎

设置模板

<!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>

关联全局并测试

yarn link

mkdir quheng
cd quheng
qu-demo

github地址

https://github.com/innerHTML123/qu-demo/

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

创建目录并初始化pakeage.json

mkdir qh-gulp
cd qh-gulp
yarn init --yes

安装gulp模块
```
yarn add gulp --dev
```
安装所需要的模块
```
yarn add
```
添加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
}

github 地址

https://github.com/innerHTML123/quheng-work-demo/

落花有意，树无情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作业三

谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。前端工程化就是通过一定的标准和规范来提高开发效率的一种手段，一切一降低成本质量保证，提高效率为目的的都属于前段的工程化解决重复的工作：上线前部署代码压缩文件打包文件等等解决代码风格各个程序员不统一的问题解决部分功能需要等待后端的接口才能进行开发解决无法使用模块化和组件化的代码解决真正意义上实现了前后端的完全分离2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？脚手架可以帮我们快速
复制链接

扫一扫