gulp的使用

141 阅读4分钟

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下载:安装的操作一步都不能少

*固定操作安装:1cmd必须先全局安装gulp(不安的话,提示:gulp不是内部命令) - 必做(运行gulp必要方式)
	 npm i --global gulp
       2cmd再你的项目中局部安装 - 可以不做,直接复制代老湿的node_modules到你的项目之中
	 npm i gulp
       3cmd在你的项目初始化gulp - 必做 
	 npm init
	 注意:名字需要自己写,但是不能有大写&中文,然后一路回车到底
       4、配置完成,开始编写属于你自己的gulpfile.js文件!!!必须是这个名字

 如何使用gulp1、先引入var gulp=require("gulp");
 API1、布置任务:
   gulp.task("任务名",()=>{
	//任务要做什么操作
   })

   执行任务:
     cmd里面输入gulp 任务名;
     如果向不写任务名,默认执行default任务名的操作

2、复制
   gulp.src("入口文件路径"); -- 选中某个、某些文件
   gulp.pipe(); -- 管道 -- 输送/插件操作
   gulp.dest("出口路径"); -- 输送到哪里去?

   案例:
   gulp.task("copyAll",()=>{
	gulp.src("源文件路径")
	    .pipe(gulp.dest("目标文件"))
   })

文件的路径写法:
  比如:
    想找到src下面的html下面的1.htmlsrc/html/1.html
    想找到src下面的html下面的所有的htmlsrc/html/*.html
    想找到src下面的html下面的所有的文件:src/html/*
    希望将src下面的所有内容都复制一份:src/*/*

恭喜你,已经学会了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://blog.csdn.net/x550392236/article/details/78017346
下载: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 输入日志