这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战
搭建前端工程化环境
假设,我们是富二代,我们有钱没有地方花,准备去盖一栋大厦。接下来正式开工啦:
1. 进行项目选址
项目想建在哪里就建在哪里, 自由吧
2. 项目进行"备案"
需要在项目目录中建立一个 package.json
文件去描述当前这个项目的相关信息, 需要在项目目录中执行 npm init之后输入项目的配置信息后会生成一个 package.json
3. "包工头入驻"
先去安装 gulp
,安装的时候先在全局环境安装:
npm install gulp -g
全局安装之后,还需要在本地(项目目录内)进行安装
npm install gulp
装包的时候在项目中会出现 node_modules 文件夹,装的包都会存放在这个文件夹中,包是有依赖关系的,安装 a 包的时候,可能 a 包还依赖 b,c 包,以此类推,所以,我们安装一个包的化,在 node_modules 里也会出现很多其他的包
注意,在 package.json
中有两个配置:
dependencies
(生产依赖)devDependencies
(开发依赖)
也就是说,我们在安装包的时候是有区别的,有的包,例如 jquery 包会打包到项目中一起上线,这样的包就是生产依赖,例如 gulp 只是在开发的时候开发环境中使用的包,不会打包到项目中不会上线,这样的包是开发依赖,在安装包的时候需要将使用的包记录在 package.json 中
安装包的时候
- 后面跟
--save / -S
就表示这个包是生产依赖, - 后面跟
--save-dev / -D
表示这个包是开发依赖, - 并且会记录在 package.json 中
当我们迁徙项目的时候,一般不会迁徙 node_modules
文件夹的, 我们只需要在项目中执行 npm install
就可以将 package.json
中记录的包全部下载
4. 建立任务分配书
在项目中创建 gulpfile.js
文件, 我们就可以在这个文件中去创建很多任务,然后让 gulp
去执行了
5. 构建了 src
开发目录,确定了 dist
目录为输出目录
下文更新预告, 跟上节奏
接下来会继续学习 node.js
搭建我们的自动化开发环境, 跟上前进的步伐, 向前加油,
提高开发效率, 为我们的开发提效赋能!
加油!! go~