前端自动化构建工具

全局安装是把包安装在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', []); };

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdspy.html