项目流程&研发环境的搭建gulp + webpack

项目流程

• 1、需求分析(需求文档，产品部门提供)
• 2、原型设计(.rp文档，Axure软件，产品经理输出、UI偶尔)
• 3、UI (user interface，用户界面)
  UE (user experience，用户体验)
  UED (user experience design，用户体验设计)
  UCD (user center disign，以用户为中心的设计)
• 4、架构设计 & 技术调研 & 研发计划 & 接口的设计
• 5、编码
• 6、联调（前后端联合调试）
• 7、提测(测试团队)
• 8、上线(灰度上线、正式上线)

环境搭建

1、此次环境搭建的目标是：支持热更新(实现监测代码更改，实时更新浏览器)，研发和生产编译出不同的版本。

2、gulp的安装：(npm安装请参考https://www.gulpjs.com.cn/docs/getting-started/quick-start/)，下面是用yarn的安装。

为什么使用yarn呢？

yarn 是新型的 javascript 包管理器，它是npm的替代品。它旨在解决npm解决不了的，在跨平台与跨用户之间安装依赖时的代码一致性问题、在安装依赖时花费太长时间、以及 npm 客户端自动执行某些依赖库的代码所导致的安全性问题。
所以相对于npm, yarn 具有快速，安全，可靠的特点。
（引用链接：如何使用yarn&如何用yarn配置node-sass）

我是用npm安装的，npm i yarn -g 、npm install -g gulp（i：install；-g或者用–global：全局安装），然后yarn -v、**gulp-v （或者–version）**查看版本号。

• 用yarn安装相关命令：
  yarn global add gulp-cli ( 安装的是全局的gulp命令行依赖)
  npm init -y (生成package.json <可以记录到第三方开发模块>)
  yarn add gulp -D (-D，–dev 开发环境的依赖；–save -S生产环境的依赖)
  （此时配置文件package.json发生变化：devdependencies:gulp 4.0.2）
  yarn add gulp-webserver -D (搭建webserver环境，默认索引页，index.html)
  yarn add node-sass gulp-sass -D (编译scss文件，node-sass 是gulp-sass的依赖)
  （如果装不上sass，请看后面“注意问题”的最后一个问题）
  yarn add gulp-concat -D (文件合并)

• webpack相关：
  yarn add webpack-stream -D (编译js文件等…)
  // 如果浏览器不能识别ES6，我们就要转译成ES5或其他版本的代码; 转编译ES6 ES7 到 ES5
  yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D

3、创建 gulpfile 文件：

// gulpfile.js

const { src, series, dest, watch } = require('gulp')  //解构；series支持传多个参数；dest目标文件
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const gulpServer = require('gulp-webserver')
const webpackStream = require('webpack-stream');
const path = require('path');


function copyHtml() {
    return src('./src/views/**/*.html')
        .pipe(dest('./dev/'))
    // todo...
}

// 编译css文件
function compileCSS() {
    return src('./src/style/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('all.css'))
        .pipe(dest('./dev/'))
}

// 编译js文件
function compilejs() {
    // return src('./src/js/**/*.js')
    //   .pipe(dest('./dev/'))
    return src('./src/js/app.js')
        .pipe(webpackStream({
            // 指定编译的模式，development 开发模式，production :生产模式，压缩，优化
            mode: 'development',
            //打包的入口文件
            entry: './src/js/app.js',
            output: {
                //完整的输出目录
                path: path.resolve(__dirname, './dev/'),
                filename: 'all.js'
            },
            module: {
                rules: [
                    {
                        test: /\.js$/, //正则匹配                        
                        exclude: /node_modules/, //排除的文件夹
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env'],//预设
                                plugins: ['@babel/plugin-transform-runtime']
                            }
                        }
                    }
                ]
            }

        }))
        .pipe(dest('./dev/'))
}

// 服务开启
function startServer() {
    return src('./dev/')
        .pipe(gulpServer({
            port: 8008, //端口
            host: '127.0.0.1',            
            livereload: true, //是否支持热更新
            open: true, //是否自动打开浏览器
            directoryListing: false //是否开启目录

        }));
}

// 实时监测
function watchFile() {
      watch('./src/style/**/*.scss', (cb) => {
        compileCSS();
        cb();
      })

      watch('./src/js/**/*.js', (cb) => {
        compilejs();
        cb();
      })

    watch('./src/views/**/*.html', (cb) => {
        copyHtml();
        cb();
    })
}

exports.default = series(copyHtml, compilejs, compileCSS, startServer, watchFile);//顺序执行，所以顺序最好别乱

//module.exports 以前的写法
//exports.defalut=copyHtml;//接收单个

这是我的文件夹目录：

4、测试，在项目根目录下执行 gulp 命令：

注意问题

• npmjs.com
  (https://www.npmjs.com/) 用的很多第三方的包，都会用到这个网站。
  常用插件 gulp-sass gulp-concat webpack-stream babel-loader

• 如果安装gulp失败？
  尝试npm yarn cnpm；
  检查node版本；
  在window下面，删除全局的node_modules下面的缓存文件；
  我是用npm安装的，npm i yarn -g 、npm install -g gulp（i：install；-g或者用–global：全局安装），然后yarn -v、**gulp-v （或者–version）**查看版本号。

• Promise
  promise解决回调地狱的问题。
  promise一旦发送数据，中途不能取消。
  如果用xmlhttprequest，中途可以取消。
  await与async成对出现，算是异步的标识。

• yarn add node-sass失败？

  • 第一步：配置淘宝镜像：
    yarn config set registry https://registry.npm.taobao.org -g
  • 查看，yarn的下载依赖包的仓库地址是否已经改变：
    yarn config get registry
  • 配置下 node-sass 的二进制包镜像地址：
    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
  • 接下来你就可以下载各种你想要的包了：

引用链接：如何使用yarn&如何用yarn配置node-sass、官网yarn命令大全