全局安装是把包安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录
本地(局部)安装是把包安装在指定项目(要在指定的根目录下输入命令)的node_modules文件夹下(若没有,会自动创建一个node_modules文件夹)
具体区别,推荐博文: 全局安装和本地(局部)安装的区别
本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动、复制、打包等,保证不同版本包之间的相互依赖,
一、理解 1、什么是项目构建?编译项目中的 js、sass、less
合并js/css等文件(使用构建工具合并后,会自动生成合并后文件,这样只需引入合并文件即可,减少资源加载的次数)
压缩js/css/html等资源文件(减小文件的大小,减小内存占用)
js语法的检查
项目构建可以减少项目的重量,
2、构建工具的作用?简化项目构建,自动化完成构建
二、构建工具主要有三种:Grunt、Gulp、Webpack
1、Grunt(中文网) (1)介绍:是一套前端自动化构建工具,一个基于nodeJs的命令行工具,它是一个任务运行器, 配合其丰富强大的插件
执行任务时是同步的,要注意任务的顺序
(2)常用功能:合并文件(js/css)
压缩文件(js/css)
语法检查(js)
less/sass预编译处理
其它
(3)安装步骤安装grunt
全局安装 grunt-cli:npm install -g grunt-cli
局部安装grunt:npm install grunt --save-dev
配置文件: Gruntfile.js:
此配置文件本质就是一个node函数类型模块
配置编码包含3步:
1. 初始化插件配置 2. 加载插件任务
3. 注册构建任务基本编码:
构建命令
使用插件
module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要编码处 }); // 2. 加载插件任务 // grunt.loadNpmTasks('grunt-contrib-concat'); // 3. 注册构建任务 grunt.registerTask('default', []); };