1、gulp(使用率:2-) - :webpack(使用率:8+)对应的
自动化构建工具(打包工具):项目经理/小组长使用的 - 体验流程
作用:
*1、复制
*2、压缩(css/js/图片...)
*3、降级ES6为ES5,降级语法 - 因为ES5之前语法其实都没有变化,ES5只是提供了一些新的API,以防老IE
4、将scss/less编译为css - 不需要学习,现在的编辑器都自带此功能
5、重命名 - 不推荐,引入的地方名字都要进行修改
为什么打包:
上线过后,不可能使用源代码(1、太大了 2、别的成员/外界也能看的懂),肯定使用的是处理过后的代码,目的:1、为了提升网站效率 2、安全性)
gulp是基于node.js编写的一个第三方模块(包、软件),需要在npm下载:安装的操作一步都不能少
*固定操作安装:1、cmd必须先全局安装gulp(不安的话,提示:gulp不是内部命令) - 必做(运行gulp必要方式)
npm i --global gulp
2、cmd再你的项目中局部安装 - 可以不做,直接复制代老湿的node_modules到你的项目之中
npm i gulp
3、cmd在你的项目初始化gulp - 必做
npm init
注意:名字需要自己写,但是不能有大写&中文,然后一路回车到底
4、配置完成,开始编写属于你自己的gulpfile.js文件!!!必须是这个名字
如何使用gulp:
1、先引入var gulp=require("gulp");
API:
1、布置任务:
gulp.task("任务名",()=>{
})
执行任务:
cmd里面输入gulp 任务名;
如果向不写任务名,默认执行default任务名的操作
2、复制
gulp.src("入口文件路径"); -- 选中某个、某些文件
gulp.pipe(); -- 管道 -- 输送/插件操作
gulp.dest("出口路径"); -- 输送到哪里去?
案例:
gulp.task("copyAll",()=>{
gulp.src("源文件路径")
.pipe(gulp.dest("目标文件"))
})
文件的路径写法:
比如:
想找到src下面的html下面的1.html:src/html/1.html
想找到src下面的html下面的所有的html:src/html*
恭喜你,已经学会了gulp
2、gulp的插件
1、压缩css步骤:
gulp-cssmin插件
npm下载插件:npm i gulp-cssmin
查看readme中的example小案例
使用前记得引入
gulp.task("copycssmin",()=>{
gulp.src("src/css/*.css")
.pipe(cssmin())
.pipe(gulp.dest("dist"))
})
2、压缩js步骤:1、会变为一行省略掉换行和空白字符(变小文件) 2、会把回调函数中的形参全部简化为一个字母,对应的位置都会简化(变小文件的同时加密保护)
gulp-uglify插件
npm下载插件:npm i gulp-uglify
使用前记得引入
gulp.task("copyjsmin",()=>{
gulp.src("src/js/*.js")
.pipe(uglify())
.pipe(gulp.dest("dist"))
})
3、ES降级:gulp-babel; 目的:1、语法变回ES5 老IE也能支持我们写的语法
切记用的是babel6
*安装:npm install --save-dev gulp-babel@7 babel-core babel-preset-env
用法:先转为ES5再压缩,参考readme
注意:
*1、记得要要把严格模式给删掉
2、先降级后压缩 - 才能压缩完整
4、图片压缩插件:
参考网页:https:
下载:npm i gulp-tinypng-nokey
如果你懒得做:
1、全局的gulp的安装:npm i --global gulp
2、把我传给你们的node_modules复制到你的项目中
3、初始化gulp:npm init
4、直接把袍哥的gulpfile.js复制到你的项目中
5、修改一下你的路径
6、打开cmd:gulp perfect
svn:集中式版本管理控制工具:
优点:安全高 - 局域网
缺点:集中式,服务器只有一台电脑,电脑坏了就凉了
固定步骤:
1、项目经理:
1、安装svn服务器端:VisualSVN-Server-4.3.2-x64.msi
2、创建用户名和密码 - 对应的程序员
3、创建仓库 - 设置可以访问此仓库的程序员
4、对应的仓库地址 和 用户名 和 密码发送给对应的开发人员
2、开发人员:
1、安装svn客户端:TortoiseSVN-1.14.1.29085-x64-svn-1.14.1.msi - 重启电脑才能看到小图标
2、对着电脑任意位置右键:svn checkout - 检出/拉出仓库
3、开始开发
4、每天下班前:提交:项目文件夹右键:svn commit 输入日志,提交完毕
5、每天早上来:更新:项目文件夹右键:svn update 输入日志