node.js
npm是node下的包管理工具
npm install 包名 普通安装包,模块放到node_modules下,初始化项目时,包不会下载 npm install -g 包名 全局安装包,模块不放node_modules下,初始化项目,包也不下载 npm install -save 包名 普通安装包,模块放到node_modules下,并且写入devDependencies。初始化项目时,--production会自动下载包 npm install -save-dev 包名 普通安装包,模块放到node_modules下,并且写入devDependencies。初始化项目时,--production却不会会自动下载包
总结
devDependencies 节点下的模块是我们在开发时需要用的,比如项目中使用的 gulp ,压缩css、js的模块。这些模块在我们的项目部署后是不需要的,所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的,应该安装在 dependencies 节点下,所以我们应该使用 -save 的形式安装。
gulp
1.自动化:让工具自动去操作一些重复的操作
2.gulp:就是一个自动化的工具
3.使用node.js开发的一个工作流自动化工具。gulp是平台,主要是平台上的插件(gulp上是task)一步步执行下来的
babel+webpack
1.babel主要处理es6向es5编译的过程
2.webpack自动化打包工具。主要处理单页应用 webpack-stream用于支持babel
需要引入 npm install babel-loader babel-core babel-preset-env
es6
1. es6是不能直接在浏览器中运行的,需要向下编译成es5甚至es3
2. 前端自动化工具gulp,就是将es6向下编译的使用编译工具自动去执行这个过程。比如sass或者less向下编译成为 css。 es6向下编译成es5,es3都需要工具自动处理。模块依赖,文件压缩,文件合并等等
3. 编译工具:具体操作自动化中的编译工具。babel专门用于处理es6编译成为es5或者es3的工具。 webpack是专门处理模块依赖,或者将各种js,css,png,font图片打包成单个文件的工具。
简单项目结构案例
1.基础架构:业务逻辑对应了页面和交互。
2.自动构建:包含文件编译、文件合并、文件压缩。开发时的自动刷新。自动化工具自行配置好,就不再使用。
3.服务器结构:主要是数据和接口。
创建项目目录结构
es6 //项目总文件
–app //前端项目文件
—-css //样式文件
—-js //脚本文件
——index.js //脚本入口文件
——class //脚本类库
——–test.js //模板类
—-views //模版文件
——index.ejs //ejs模版文件
——error.ejs //ejs错误文件
–server //后端项目文件,需要安装node.js程序。https://nodejs.org/zh-cn/download/
》》》》在server文件夹下面使用 express -e . //使用ejs模版引擎,创建命令
》》》》npm install 创建需要的包
–tasks //自动化工具执行及辅助工具文件夹
—-util //创建常用文件
——orgs.js //创建常用配置
–package.json //使用命令npm init 创建package.json。用于配置默认依赖包
–.babelrc //创建babel需要配置文件
–gulpfile.babel.js //官网要求gulpfile.js。接下来的脚本使用es6,所以需要本名称。