grunt，gulp
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-cssmin 压缩/ 合并css文件
6. *grunt-contrib- htmlmin _压缩html文 件
7. *grunt-contrib- imagemin _压缩图片 文件(无损)
8. *grunt-contrib-copy 复制文件、 文件夹
9. * grunt-contrib-watch 实时 监控文件变化、调用相应的任务重新执行
- grunt-contrib-concat 1. 安装插件 npm install grunt-contrib-concat --save-dev 2. 加载插件 grunt.loadNpmTasks(‘grunt-contrib-concat’);grunt.initConfig({ concat: { options: { separator: ‘;’, }, dist: { src: ['src/js/.js’],合并所有的文件 dest: ‘build/js/add.js’,合并后文件放的位置 }, },});1. grunt-contrib-concat 1. 安装插件 npm install grunt-contrib-uglify --save-dev 2. 加载插件 grunt.loadNpmTasks(‘grunt-contrib-uglify’);grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json’),//读取package文件 uglify: { options: { banner: '/! <%= pkg.name %> - v<%= pkg.version %> - ’ + ‘<%= grunt.template.today(“yyyy-mm-dd”) %> */’ //项目名字，项目版本，压缩时间 }, my_target: { files: { ‘dest/output.min.js’: [‘src/input.js’] //加min与源文件区分开，前面是压缩到哪，后面是压缩哪个 } } }});//缩进问题，源文件与压缩文件名字一致，改成不同名字就行了，不影响使用，电脑问题每次都要输入一次命令，效率低下grunt.registerTask(‘default’, [‘concat’,‘uglify’]);//defaukt一个代称而已，随便换，语法问题，直接输grunt就行 注释掉text1.js里的打印函数，合并没有问题，压缩少了前面函数
- 因为没有调用foo函数，未了使压缩的文件更轻量，删掉没有意义的函数
- 把另一个打印注释掉，发现还有东西存在，已经调用map方法，正在使用。
- result没了是因为定义了变量但是没用
- var 换成let没法用，不支持es6语法，需要转换成es5语法在进行操作
调换两个的位置，发现没有压缩文件
1. grunt执行文件顺序是同步的
js语法检查1、安装插件：npm install grunt-contrib-jshint --save-dev2、启动插件：grunt.loadNpmTasks(‘grunt-contrib-jshint’);{ “curly”: true,“eqnull”: true,“eqeqeq”: true,“expr”: true,“immed”: true,“newcap” : true,“noempty”: true,“noarg”: true,“boss”: false,“node”: true,“browser”: true, //不能使用未定义的变量 “undef”: true, //语句后边必须有分号 “asi”: false, //预定义不检查的全局变量 “predef”: [“define”,“BMap”,“angular”,“BMAP_STATUS_SUCCESS”], //BMap是百度地图的api，anglualr是引入angular后自动生成的变量}jshint: { options: { jshintrc : ‘.jshintrc’//指定配置文件 }, all: [‘Gruntfile.js’, ‘src/js/.js’]//包括检查自己}css部分跳过watch监视任务自动打包每次修改都需要再编译一次，很麻烦，用watch监听，自动打包1、安装插件：npm install grunt-contrib-watch --save-dev2、启动插件：grunt.loadNpmTasks(‘grunt-contrib-watch’);watch: { scripts: {//script是一个对象 files: ['src/js/.js’,‘src/css/*.css’],//files指监听的文件 tasks: [‘concat’,‘uglify’,‘jshint’,‘cssmin’],//task是任务的意思，指监听到变换后执行的任务 options: { spawn: false, },//options指键值对，spawn（百度翻译）大量生产的意思，大量生产为false，专业名称叫“变量更新”//设置为true的话就是指“全量更新”，改css前面三个用不着，提高效率 },},二、Gulp
1. 特点
1. 任务化，上来就是一个统一的接口，你必须要去注册一个任务
2. 基于流
2. 中文主页: http://www.gulpjs.com.cn/
3. gulp是与grunt功能类似的**前端项目构建**工具，也是基于Nodejs的自动**任务运行器**
4. *能自动化地完成javascript/coffee/sass/less/html/ image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
5. gulp更高效，更易于使用，插件高质量
/- distsrc-js-css-less/- index. htmL/- gulpfile. js-----gulp配置文件|- package.json｛“name”: “gulp_ ,test”,“version”: “1.0.0”}看api显示说明gulp是对象.方法gulpfile.js
1.
glup_text
1. 全局安装 npm
2. gulpfile.js
1. 在头部用require引入一个gulp对象，‘’里面放gulp包名，这样全局就多了一个gulp对象
2. var gulp = require('gulp');
3. 然后只需要注册任务，用api里面的方法去注册
4. glup.task('任务名'，function（）｛ task里面两个参数，任务名和回调参数
5. 配置，执行任务的操作
6. ｝然后就可以用gulp 任务名来执行任务
7. 如果任务太多就注册默认任务名
8. gulp.task('default',['任务名'])
9. https://www.cnblogs.com/murenziwei/p/10543765.html报错问题，3跟4的区别
3. 介绍插件
1. grunt concat只合并js文件，gulp css也可以
2. grunt压缩直接手动加min，gulp得使用rename
4. 注册合并并压缩js的任务
1. gulp.task('js',function(){//js是任务名，随便取的
1. return gulp.src('src/js/*.js')先调用src方法，找源文件的路径（固定死套路）
1. 扩展,如果js文件夹下还有文件夹怎么办
2. 上方方法为浅度遍历，找到js下面所有后缀为js的文件
3. 深度遍历：src/js/**/*.js无论有多少层都能找到
2. 读取完后开始对数据进行操作
3. .pipe() pipe意思是管道，先通过管道把数据读取到内存，然后都在内存里操作，最后操作完成的数据也都通过pipe流到本地，所以数据都是在pipe里面进行操作
4. 看文档，下载插件，同时下载多个包
5. 下载完后引入他，引入的插件对应的值都是方法，说到是方法，就该想到调用他
6. 链式调用
7. 压缩，压缩后考虑.min的结尾，再铺管道，用rename，rename直接写文件名，还有就是用rename里面的配置对象，对象有个属性叫suffix，表示后缀名的意思
8. 想看最后的效果，还得再铺管道，写输出
2. }
3. 整理思路：
1. 用gulp，首先安装gulp，干活的是下面的插件。引入的gulp是对象，下面的插件都是方法
2. 然后注册任务，task，第一个参数写任务名，第二个写回调函数，回调函数里，先来个return，然后读数据到gulp的内存里，然后在管道里操作数据
4. console注释掉，结果压缩文件里面还是没有这句话了，构建工具为了更减省
5. 合并压缩css，解析css
1. 下载插件，加载插件
2. 插件提供的方法不用gulp，gulp自带的方法需要gulp.
6. 注册默认任务，讲3跟4的差距
7. 同步异步问题，没搞懂
8. 自动编译（看文档）
1. 先下载插件
2. 头部引入
3. 监视任务在启动的过程中，其他默认参数都要启动，所以加个参数，名字叫default，意思就是启动watch先启动下面那些任务
4. 然后写回调函数，回调里面不用写return了，livereload可以作为对象使用，有个方法叫listen（）；开启监听，然后用glup确定监听的目标以及绑定相应的任务
5. 比如先让他监听js文件，后面写一个数组，放要启动的对应任务，也可以写数组，代表监听多个文件，监听less和css，放个css就行，启动css会先启动less
6. 还得在每个管道下面写livereroad，代表实时刷新
7. watch任务监听源目标，监视后重新打包构建，编译完后用户打开页面，把最新的效果给填充到页面里，不加的话也能刷新，但是为了安全起见，还是加的比较好
8. 官网搜livereroad证明
9. 没把这加入到默认任务中，因为默认任务就是执行任务的，这玩意是用于监听的，glup watch然后看光标就可以看出来了。把这个称为半自动
10. 因为版本修改的问题，所以要修改写法，用gulp.series
9. 总结：先下载gulp，然后下载插件，然后引入·插件，然后注册任务，让铺管道实现想要的效果，然后监听事件，注册默认任务。注意3跟4版本的不同，需要修改的地方
三、Webpack(最火)
1.
版本问题，有1.几，2.几，3.几，2和三是一样的，一有些差距，有些公司可能会用1，学完3后1就不是什么难事了，因为核心思想是一样的，我们主要学3
2.
去官方文档里看，
1.
上面是构建你的啥啥啥，下面是大的导图，左下角字的意思，模快相互依赖。
2.
箭头指向的东西是我要依赖的东西，最右边下面是静态资源的意思，就是我们最后打包上线的东西
3.
意思就是webpage通过对左边模块的作用，然后构建，最后打包上线
4.
我们说grunt，gulp都是项目构建工具，但webpage又叫模块打包器，在他眼里，所有文件都是模块，所以要结合我们模块的知识来学。除了html，因为他认为上来就该有的结构。
5.
参考文档，四个核心概念
1.
entry 入口，output输出，loader加载器（说着webpage把其他都看成模块，但是本身只能识别js和json文件，没法直接读像css那样的文件，所以要用loader帮忙加载），plugins插件（跟另外俩的一样，扩展功能）
2.
点击加载器，看左边各种各样的loader
3.
插件也有对应列表，看入门手册
6.
把之前的模块化思想放到这里来，出了html，其他都当模块来用
3.
看教程
·