Gulp项目开发环境的搭建和流程

架构设计

前后端分离（前端：html css js 后端：提供接口、数据库操作、。。）,前后端不分离：（.jsp .php .aspx）
rmvc 模式
router :路由
model: 数据层
view 视图层
controller 控制层（业务逻辑的处理，router+model衔接到一块）

技术栈：es6 + zepto.js + scss …
构建环境：gulp + webpack
移动端适配的方案：rem + 百分比

项目的流程

需求分析（需求文档，产品部门提供）
原型设计（Axure，通常产品经理输出、UI）
UI （user interface），用户界面
UE (user experience ) 用户体验
UED (user experience design ) 用户体验设计
UCD (user center design ) 以用户为中心的设计
架构设计 & 技术调研 & 研发计划 & 接口的设计
编码
联调
提测（测试团队负责测试）
上线（灰度上线、正式上线）

需求分析

需求规格说明
需求确认（沟通确认）
需求反复修改（立项的时候，确立需求变更的流程）
原型设计
作用：让需求变得更清晰，业务流程更清楚，UI设计的参考

研发环境的搭建

目标：支持热更新，研发和生产编译出不同的版本

yarn : 更稳定

yarn init -y 生成package.json
yarn global add gulp-cli :gulp的辅助程序

yarn add gulp -D // -D , --dev 开发环境的依赖 --save -S 生产环境的依赖
yarn add gulp-webserver -D //搭建研发的server
yarn add node-sass gulp-sass -D //编译scss文件
yarn add gulp-concat -D //文件的合并
yarn add webpack-stream -D //编译js文件
//编译es7 es6 到es5
yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D

使用gulp 需要 创建gulpfile.js文件
实列
gulpfile.js文件：

const { src, series, dest, watch } = require('gulp')//解构,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');//path路径的意思


function copyHtml() {//复制HTML
  return src('./src/views/**/*.html')//目标地址
    .pipe(dest('./dev/'))
  // todo...
}

function compileCSS() {//解析CSS
  return src('./src/style/**/*.scss')
    .pipe(sass().on('error', sass.logError))
//把src（就是source,源文件）加载到管道流中，在管道流中调用sass工具把scss翻译成css文件，在这个工程中如果有错误就输出错误(logEoor)
    .pipe(concat('all.css'))
    .pipe(dest('./dev/'))
}


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/'),//目录名dirname
        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: 8000,
      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);//导出的每一个函数

当运行gulp就自动打开网页