# fed-e-part-module-3

**Repository Path**: igor-rub/fed-e-part-module-3

## Basic Information

- **Project Name**: fed-e-part-module-3
- **Description**: 作业3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-part-module-3

#### 介绍
作业3

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

答：前端工程是针对与前端项目一套完整的解决方案，从项目的搭建，运行，打包，部署，迭代整个流程的一套解决方案，通过gulp可以构建自动的工作流，通过webpack可以构建项目运行环境和打包资源的问题，在通过一些部署工具，让开发流程更加的高效。前端工程化是一套流程，其中每一个技术运用到每一个环节，形成整体的一个结构。

解决的问题：
1. 解决了图片压缩的问题，不需要手动一张一张压缩
2. 解决了创建项目结构的问题，而不是复制粘贴
3. 解决了代码直接部署暴漏的问题，可以压缩代码。

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

除了创建项目结构，可以提高工作中重复使用文件的效率，并不局限于创建结构，也包含项目的运行，打包等工作任务，以及对各种不同框架的打包，可以让项目层次更清晰，开发流程更加的智能化和安全化。


编程题在pages-boilerplate文件夹

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

2、尝试使用 Gulp 完成项目的自动化构建

1. 脚手架说明，项目在code/igor-cli

通过yeoman-generator 构建项目的脚手架


通过prompting来接受用户的输入信息

通过writing信息来复制项目结构
// 定义脚手架基本结构
const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    // 接收用户的输入
    prompting() {
        return this.prompt([
            {
                type: 'input',
                name: 'name',
                message: '输入你的项目名称',
                default: this.appname
            }
        ]).then(answers => {
            this.answers = answers
        })
    }
    // 读取文件并写入
    writing() {
        const template = [
            'tsconfig.json',
            'README.md',
            'postcss.config.js',
            'package.json',
            'build/build.js',
            'build/webpack.base.conf.js',
            'build/webpack.dev.conf.js',
            'build/webpack.prod.conf.js',
            'public/index.html',
            'src/assets/css/index.css',
            'src/assets/images/logo.png',
            'src/assets/images/page1.jpg',
            'src/assets/images/page2.jpg',
            'src/components/img-temp.vue',
            'src/components/logo.png',
            'src/router/index.ts',
            'src/App.vue',
            'src/view/Home.vue',
            'src/view/page1.vue',
            'src/view/page2.vue'
        ]
        // 复制每一个项目文件
        template.forEach(element => {
            this.fs.copyTpl(
                this.templatePath(element),
                this.destinationPath(element),
                this.answers
            )
        })
    }
}



2. gulp构建补全，项目在code/pages-boilerplate

安装gulp依赖

```
yarn add gulp
```

通过gulp-clean-css  压缩css
通过gulp-htmlmin压缩html
通过gulp-imagemin压缩图片资源
通过gulp-rename修改输出文件名
通过gulp-sass编译sass样式插件
通过gulp-load-plugins加载插件库
通过gulp-uglify压缩js插件


利用browserSync启动服务，来运行项目


// 实现这个项目的构建任务
// 引入需要用到的gulp人物
const { src, dest, parallel, series, watch } = require('gulp')
// 删除组件
const del = require('del')
// 启动服务组件
const browserSync = require('browser-sync')
// 加载各种plugins组件
const loadPlugins = require('gulp-load-plugins')
// 定义组件变量方便引用
const plugins = loadPlugins()
// 创建一个本地地位
const bs = browserSync.create()
// 定义一份页面的data，根据自己的需求编写
const data = {
   。。。
}
// 清理打包资源的函数
const clean = () => {
    return del(['dist', 'temp'])
}
// 编译css的函数
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/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)
// 初始化web服务
    bs.init({
        notify: false,
        port: 8888,
        open: true,
        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 dev = series(compile, serve)

module.exports = {
    clean,
    build,
    dev
}