package.json:每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。项目构建:使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。本节课主要讲解当前开发中最流行的三种自动化构建工具: Grunt, Gulp, webpack。从理解什么是构建工具,为什么要用构建工具,到如何去使用构建工具。1、什么是项目构建 编译项目中的js,sass,less 合并js/css等资源文件 压缩js/css/html等资源文件 js语法检查 …2、构建项目工具的作用 简化项目构建,自动化完成构建3、构建工具
1. Grunt(国外市场大一点,国内相对较少)
1. grunt相当于大脑,干活的是插件
2. https://www.gruntjs.net/官网
3. 全局安装grunt-cil
1. npm install -g grunt-cli
2. cli 命令行接口,和输入命令对接 grunt里面各种各样的命令,cli帮忙往外调,所以全局安装(直接打开百度)
4. 安装grunt
1. npm install grunt --save-dev
2. –save : dependencies 键下,发布后还需要依赖的模块,譬如像jQuery库或者Angular框架类似的,我们在开发完后后肯定还要依赖它们,否则就运行不了。–save-dev : devDependencies 键下,开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它,而只是在我们开发才用到它。开发依赖
5. grunt_text
1. build ---构建生成的文件所在的文件夹
2. src---源码文件夹
3. index.html---页面文件
4. Gruntfile.js---grunt配置文件(注意首字母大写)
1. 类似于node的app.js,运行时先找这个文件
2. 模块,exports暴露模块,暴露出一个函数
3. 初始化配置grunt任务,执行grunt任务时加载对应的任务插件,注册grunt的默认任务,后面是默认依赖任务
5. package.json---项目包配置文件
6. 常用插件*捕件分类:
1. *grunt团队贡献的插件:插件名大都以contrib-开头
2. *第三方提供的插件:大都不以contrib-开头
3. *常用的插件:
1. *grunt-contrib-clean 清除文件(打包处理生成的)
2. * grunt-contrib-concat 合并多个文件的代码到一个文件中
3. * grunt-contrib-uglify 压缩js文件
4. *grunt-contrib-jshint javascript语法错误检查;
5. * grunt-contrib-