Git+gulp项目构建相关笔记(一)

1.抓包工具可以抓普通的http请求的数据,如果需要抓https就有些困难了,需要另外设置抓包工具的选型,要让抓包工具允许抓取https然后还要设置可解密,然后重启一下抓包工具就可以了,有些浏览器会检测到抓包工具的存在。


2.gulp是一款负责项目构建工具
◆Gulp是基于Nodejs开发的一个构建工具,借助gulp插件可以实现不同的构建任务,以其简洁的配置和卓越的性能成为目前主流的构建工具
◆全局安装 npm install -g gulp,不需要你配置全局的环境了。
◆安装在指定目录下,在指定的目录下打开git bash,然后使用npm install (包)工具名称,这样就会安装在执行这个安装命令的目录下,node_modules,称之为本地安装,一般用于一次性构建,只会在你当前项目的目录下进行安装,好处时不会在任何地方都能够使用gulp。
◆如果安装起来比较慢,那么可以打开npm.taobao.org,使用国内的淘宝镜像,在安装的使用后缀加上 --registry=淘宝镜像地址,先进国内的淘宝镜像网站里,去哪里复制镜像地址。
◆为什么需要项目构建工具【
◇多个开发者共同开发一个项目,每位开发者负责不同的模块,这就会造成一个完整的项目实际上是由许多的“代码版段”组成的。
◇使用less、sass等一些预处理程序,降低CSS的维护成本,最终需要将这些预处理程序进行解析。
◇合并css、javascript,压缩html、css、javascript、images可以加速网页打开速度,提升性能。
◇这一系列的任务完全靠手动完成几乎是不可能的,借助构建工具可以轻松实现。
☆所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
◇常见的构建工具包括:Grunt、Gulp、F.I.S(百度出品)、webpack
◇那么多构建工具该使用哪个?前端就这样,轮子太多,你造一个我造一个,不知道使用谁。



3.gulp的使用
◆在指定项目下安装本地版gulp,会出现一个node_modules
◆新建一个gulpfile.js的文件,书写代码【
◇//引入本地安装的gulp,require('gulp');//这句代码表示nodejs会自动去引入node_modules文件夹下的gulp文件夹下的index.js文件。
◇var gulp=require('gulp');//返回值是一个对象,借助此对象可以实现任务清单订制,通过一系列方法实现。
◇gulp.task('less',function(){
console.log("gulp学习");
});//表示定义一个任务,第一个参数表示任务的名称,第二个参数表示怎么去执行,使用的时候,在brah中输入 gulp less就会去执行这个任务了,less表示你定义的任务名称,less这个任务最终是要将less文件转换为css文件的。
◇gulp.src('./public/less/*.less');//借助gulp.src来指定less文件位置
◇使用gulp的插件,也是基于nodejs开发的,所以还是使用npm,npm install gulp-less,也是本地安装,会安装到当前目录下的node_modules文件夹中
◇var less=require('gulp-less');//表示引入gulp-less这个插件对象
◇gulp.src('./public/less/*.less').pipe(less());//pipe表示管道,相当于bash中的管道符号|,将上一次的结果作为参数传递给下一个命令,less是一个对象,less()表示执行这个对象的方法,将less转换为css。
◇gulp.src('./public/less/*.less').pipe(less()).pipe(gulp.dest('./release/public'));//gulp.dest表示存储到哪里,也就是将转换后的结果存到./release/public目录下,如果该目录不存在,则会自己创建一个。
◇gulp.src('./public/less/*.less').pipe(less()).pipe(cssmin())pipe(gulp.dest('./release/public'));//cssmin表示将css文件压缩一下,但是要先使用npm install gulp-cssmin,然后再gulpfile.js文件中引入 var cssmin=require("gulp-cssmin");








4.Gulp工作原理
◆通过不同的插件实现构建任务,Gulp只是按着配置文件调用执行了这些插件,相当于一个自动化任务运行器,需要什么就装什么插件,这样就达到了以不变应万变,就像小霸王游戏机一样,通过插卡就能玩儿不同的游戏。
◆文件合并:gulp-concat、文本替换:gulp-replace、图片压缩:gulp-imagemin、css压缩、gulp-cssmin、js压缩:gulp-uglify、文件拷贝:gulp-copy。
◆Gulp就是一个软件,只不过没有图形化界面,它是基于nodejs环境下的。


5.Gulp API
◆Gulp是基于NodeJS的,通过require可以引入一个NodeJS的包(模块),其作用类似于浏览器中的script标签引入资源,被引入的包存放在node_modules目录下。
◆引入gulp包(模块)后返回一个对象,习惯赋值给变量gulp,通过该对象提供的方法(API)完成任务的配置。
◆gulp.task() 定义各种不同的任务,有两个参数,也可以有三个参数,两个参数的话,第一个是任务名,第二个是执行的函数,三个参数的话,第一个是任务名,第二个是一个数组,用于指定不同任务间存在的依赖,可以先执行那些依赖的任务再执行当前任务,第三个是执行的函数
◆gulp.src() 需要构建资源的路径,字符串或数组(可以正则方式书写),如果构建的文件不在同一个目录,并且最后也不想放到同一个目录中去【
◇可以使用gulp.src('./**/*.html'),这样可以将根目录下所有的html文件都递归找到,并且最后存储的时候也会递归的放入到新的目录中去,
◇也可以使用gulp.src(['./index.html','./views/*.html']{base:'./'}),这样是通过指定需要的多个文件路径,{base:'./'}基于根目录,表示./是不动的 ,其它的会跟着转移到新的目录中去,也就是说./后面的内容会直接放入新的目录中去,如果不加{base:'./'},则最后都会放到同一个目录下。

◆gulp.pipe() 管道,将需要构建的资源“输送”给插件。
◆gulp.dest() 构建任务完成后资源存放的路径(会自动创建)
◆gulp.watch()


6.Gulp 常用插件
★插件使用方式,先在gulpfile.js中引入gulp模块儿,然后再引入指定的插件,如var gulp=require('gulp');var less=require('gulp-less');,然后使用gulp.task方法定义任务,gulp.task('less',function(){
//借助gulp.src方法来指定less文件路径
gulp.src('.public/less/*.less').pipe(less()).//然后使用管道方法将引入的插件对象调用起来即可,然后调用gulp.dest方法存到某个目录下
pipe(gulp.dest('./release/public'));
})
★实际上插件只要放入pipe()就可以使用了。
◆gulp-less 编译LESS文件
◆gulp-autoprefixer 添加CSS私有前缀,可以让各个浏览器都能够兼容css3。
◆gulp-cssmin 压缩CSS
◆gulp-rname重命名
◆gulp-imagemin 图片压缩
◆gulp-uglify 压缩Javascript,uglify意思是丑化,压缩操作就是丑化操作。
◆gulp-concat 合并,将几个文件合并成一个文件,一般用于js,方法中输入字符串参数会作为最后的文件名
◆gulp-htmlmin 压缩HTML,需要传递参数,如果删除所有的空白符,{collapseWhitespace:true}。
◆gulp-rev 添加版本号 解决浏览器缓存机制带来的影响,防止浏览器缓存了原文件而不请求新文件的问题,版本号为当前文件内容通过md5加密后的字符串中的一部分,很不错,记得每次添加版本号之后要生成一个文件关系的json,用于解决文件引用名改变的问题【
//定义一个任务 将less>css
gulp.task('less', function() {
//指定less文件路径
gulp.src('./public/less/*.less').
//借助gulp插件来实现 less转换为css
pipe(less())
//解除gulp插件来实现 自动添加css3私有化前缀
.pipe(autofix())
//借助gulp插件来实现 css压缩
.pipe(cssmin())
//借助gulp插件来实现 文件版名称添加版本号
.pipe(rev())
.pipe(gulp.dest('./release/public'))//第一次输出 输出所有的css文件
//输出json字符串 结果是 {原文件名:添加版本号后的文件名}
.pipe(rev.manifest())
.pipe(gulp.dest('./release/rev'))//第二次输出 输出文件对应关系 
//也是根据这个来解决原文件添加或者修改版本号字符串之后的文件引用问题


});
】。
◆gulp-rev-collector 内容替换,解决gulp给文件添加或者修改版本号之后的文件引用错误的问题,【
//定义一个任务,把html文件的文件引用替换一下,因为原css文件添加了版本号
gulp.task('rev',function(){
//虽然./release/**/*.html已经达到了这个效果,
//但是加{base:"./release/"}是为了保证./release/rev/*.json不会输出到同一个目录下
gulp.src(['./release/rev/*.json','./release/**/*.html'],{base:"./release/"})
//按照以上的信息进行替换文件引用
.pipe(revcollector())
.pipe(gulp.dest('./release/'));
});


】。
◆gulp-useref 通过在文件中进行注释的方式,进行合并文件生成新文件并且修改新文件的引用路径
在指定的脚本文件上下位置加上注释【
<!-- build:js ./angular.min.js -->
<script src='angular.js'></script>
<script src='angular-route.js'></script>
<!-- endbuild -->
,然后就会合并文件,还会修改文件引用
//定义一个任务
gulp.task('useref',function(){


gulp.src('./index.html')
//开启自动化 读取指定文件中的注释  进行操作
.pipe(useref())
//这里判断是否压缩 jsmin是引入uglify后返回的对象
.pipe(gulpif("*.js",jsmin()))
.pipe(gulp.dest('./release'));


})
】,删除标记,用于删除无效的内容【
<!-- build:remove -->
<!-- endbuild -->


◆gulp-if 用来判断文件名称,第一个参数的判断体,第二个参数是结果为true后执行的方法,如gulpif('*.js',uglify());表示如果文件是js文件则进行压缩,uglify是你引入的丑化压缩js对象【
//定义一个任务
gulp.task('useref',function(){
gulp.src('./index.html')
//开启自动化 读取指定文件中的注释  进行操作
.pipe(useref())
//这里判断是否压缩 jsmin是引入uglify后返回的对象
.pipe(gulpif("*.js",jsmin()))
.pipe(gulp.dest('./release'));
})
】。
◆gulp-rename 重命名插件【
//定义一个任务 将less>css
gulp.task('less', function() {
//指定less文件路径
gulp.src('./public/less/*.less').
//借助gulp插件来实现 less转换为css
pipe(less())
//解除gulp插件来实现 自动添加css3私有化前缀
.pipe(autofix())
//借助gulp插件来实现 css压缩
.pipe(cssmin())
//借助gulp插件来实现 文件版名称添加版本号
.pipe(rev())
.pipe(gulp.dest('./release/public'))//第一次输出 输出所有的css文件
//输出json字符串 结果是 {原文件名:添加版本号后的文件名}
.pipe(rev.manifest())
.pipe(rename('js-manifest.json'))//在这里给对应文件关系的json文件重命名
.pipe(gulp.dest('./release/rev'))//第二次输出 输出文件对应关系 
//也是根据这个来解决原文件添加或者修改版本号字符串之后的文件引用问题


});





7.http://du9.co/是一个查询ip地址的网站,并且可以看到国外的名站。


8.浏览器缓存机制,一般都是按着资源路径名称来进行缓存,如果资源路径名称发生改变了,就会重新发送请求再进行缓存,如nav.css请求一次之后会缓存,nav.css?v=1会请求一次之后再缓存,通过改参数的方式可以欺骗浏览器重新进行请求。


9.记录当前项目中gulp所使用的插件
◆第一种,在首次本地安装gulp时,输入npm install gulp --save-dev,这样安装的时候,就会生成一个package.json文件,每次你安装插件的时候都带上后缀 --save-dev,那么都会往package.json文件里面写内容,写的是一些依赖信息。
◆第二种【
◇新建一个package.json文件
◇然后在此目录打开gist bash
◇之后 输入 npm init,之后输入当前项目的信息,不然一路回车
◇最后你新建的package.json中就记录了当前项目中依赖的所有gulp插件

★你删除本地的node_module文件后,输入npm install,这时候会去读取package.json中记录的依赖信息,就会安装所有的gulp插件及依赖的文件了。


10.如果引入的直接是less文件而不是css,那么可以使用官方的less.js文件,先引入a.less,然后再引入less.js,这样也可以正常使用了,但是必须以访问服务器的方式来访问,less.js才能够发挥作用,不然没有用。


11.git bash中直接输入gulp而不输入其它参数则会执行一个 gulp.task('default',function(){})这样的默认的任务,如果你定义了名字叫default的任务,那么就会执行这个,一般为了方便,会把这个作为总任务,当然需要先指定其它部分任务,最后在default任务中依赖其它部分任务,这样只需要输入gulp就能够一下子构建好整个项目。


12.定义总任务,gulp.task('zong',['cssmin',jsmin,'image'],function(){
console.log('先执行cssmin、jsmin、image这三个任务');
}),但是这么特别消耗内存空间,比如替换html中引用的其它文件名之前,先执行cssmin、image、jsmin这些任务。


13.设置其它任务的依赖可能会发生一件事情,就是同步执行,其它依赖的任务都会同时进行,所以可能会导致那些依赖的任务还没有执行完毕,当前任务也开始执行了,解决这个问题使用return关键字【
//第一个任务
gulp.task('less',function(){
//加return就会执行完毕之后才会再执行下一个任务
return gulp.src('./public/less/*.less')
.pipe(less())
.pipe(gulp.dest('./release'));
})
//总任务,依赖第一个任务
gulp.task('zong',['less'],function(){
console.log('任务执行完毕!');
})



14.在git中如果不想提交某些文件夹,可以创建一个.gitignore文件,然后在每行写上一个要忽略的文件名或者目录名,当使用git添加或者提交的时候就会去读取.gitignore文件中的清单,然后忽略清单里的文件或者文件夹。


15.一般使用git提交的时候都不会把node_module文件夹提交上去,因为文件太多太碎了,但是会把package.json提交上去,所以当你下载的时候,只需要在根目录打开git bash,输入npm install就会下载当前和没提交上去的node_module一样的东西了。

猜你喜欢

转载自blog.csdn.net/jwllwj_2018/article/details/80621387