Node笔记五(本地构建工具)

资源

各种进阶资源 + 联系方式请看下方链接
资源

为什么需要本地构建

前端工程日新月异 并不是写完代码就没事了的 因为代码总要有人打包 sass less 以及 es6 es7的兼容浏览器 压缩代码等等总要有人去做

gulp

• 请根据gulp的中文文档下载安装
• 如果直接在命令窗口执行gulp的话会报错，只有全局安装gulp才可以直接在命令窗口执行gulp但是如果全局安装的话 别人如果git clone你的代码别人就执行不了了 所以只有在 package.json文件中的script对象里面创建 “gulp”:“gulp”,为什么在script中创建gulp就可以用npm run gulp执行了呢？因为node_modules里面有个.bin的文件里面有个gulp相当于是gulp的包的快捷方式

gulp的符号意思

• *匹配任意个字符
• ？匹配一个字符
• […]匹配范围内字符
• !(pattern1|pattern2)匹配取反
• ?(pattern1|pattern2)匹配0个或1个
• +(pattern1|pattern2)匹配1个或多个
• *(a|b|c)匹配任意个
• @(pattern|pat*|pat?erN)匹配特定的一个
• **任意层级匹配
• 通过npm init生成package.json文件具体步骤看下一条
• https://my.oschina.net/dkvirus/blog/1068813
• gulp.task(‘mytask’[‘of’,‘names’],function(){})//这里第一个参数是要执行的任务名称 第二个参数是依赖 是一个数组里面的是要先于第一个参数执行的任务名称第三个参数是一个回调函数或者返回一个promise或者stream (NodeJS提供了Stream API来实现基于流的IO应用场景例如看视频如果后台传输完了才可以看用户体验可想而知) 把任务变成异步的需要注意的是 gulp四版本之后第二个参数’,gulp.parallel(‘clean’,‘html’,()=> {}）变成了这种形式 其中parallel是并发执行的 还有个同步执行的没写 可以看api

babel

• 处理浏览器对高级语法的兼容
• 详细可看文档这里只是本人笔记

1. 安装npm install babel-cli --save-dev
2. 安装npm install babel-preset-env --save-dev
3. 新建.babelrc文件在里面{
   “presets”:[“env”]
   }
4. 在package.json 的scripts里加上build": “babel client/js -d build” 这句话的意思是新建一个build的命令用babel把client文件夹下的js文件夹里面的文件转化为es5格式的转化到build文件夹中 自定义文件夹名需要更改下
5. 想要看babel在各个环境下的使用可以点击babel中文网点击上方的设置 然后看Build systems这一项 选择想要使用的环境 这里使用gulp选择gulp 然后 npm install --save-dev gulp-babel
6. 如果碰到了es5之前的想要转换可以用pluging 同时还要在.babelrc里配置下例如object.assign()
7. 问题是转化完之后可以再服务器端跑 但是有些在浏览器上满跑不了

webpack

• 学习webpack感觉还是看文档比较好 想用到啥东西就配置啥，在这里都不一一赘述了