项目流程
- 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 - 接下来你就可以下载各种你想要的包了:
- 第一步:配置淘宝镜像: