自开园以来一直么有发过文章,今天来跟大家一起解读下gulp的使用
首先,咱们肯定先得安装gulp啊
在webstrom软件下打开命令行
这里肯定是要在NodeJS下运行环境 , npm是随着NodeJS一起安装的包管理工具,这里不做过做的说明了,只要下载安装NodeJS即可,言归正传,在命令行进行全局安装,之后再进行本地局部安装
如果软件左侧项目中出现这个gulp文件说明下载安装成功了~
安装好了我们就可以使用它来为我们的文件进行合并压缩了
第一步:我们需要再命令行输入 npm init ,为我们创建一个package.json的文件,主要是为我们显示当前版本,作者,制作时间,等等,这步很重要咯~
第二步:需要我们手动创建一个gulpfile.js文件,目的是告诉gulp 我们要做什么,他要执行什么
第三步:这个时候就需要我们编写task任务
1.创建默认的task任务: gulp.task("default",["task1","task2"]); 执行任务 :gulp
2.复制文件的任务:gulp.task("copy",function(){
return gulp.src("index.html").pipe(gulp.dest("dist/"));
});
注:src后面表示的是需要copy的文件 dest后面表示的是copy到哪儿的文件路径 dist文件一般为发布文件夹
3.复制多个文件:gulp.task("copy-img",function(){
return gulp.src("images/**/*").pipe(gulp.dest("dist/images"));
});
注:**表示文件夹 *表示内容
4.获取多组文件: gulp.task("data",function(){
return gulp.src(["xml/*.xml","json/*.json"]).pipe(gulp.dest("dist/server"));
});
注:将xml文件下以xml为扩展名的,json文件下以json为扩展名的文件全部copy到dist的server下
5.排除某些文件:gulp.task("datas",function(){
return gulp.src(["xml/*.xml","json/*.json","!json/s-*.json"]).pipe(gulp.dest("dist/server"));
});
注:排除以s-开头的json文件
6.监听watch任务:gulp.task("watch",function(){
gulp.watch("index.html",["copy"]);
gulp.watch("images/**/*",["copy-img"]);
});
第四步:在我们了解了这些指令后就需要我们进一步学习指令
1.编译sass 安装gulp-sass (npm insatll gulp-sass --save-dev)
然后在require调用使用
2.合并文件 gulp-concat (npm install gulp-concat --save-dev)
后面紧跟的是合并的文件名
3.感兴趣的来了,压缩文件 gulp-uglify (npm install gulp-uglify --save-dev)
使用方法在上面两个程序中有体现
4.给静态资源添加一个hash值后缀 gulp-rev (npm install gulp-rev --save-dev)
5根据rev生成manifest 用来替换html gulp-rev-collector (npm install gulp-rev-collector --save-dev)
6.压缩css文件 gulp-minify-css (npm install gulp-minify-css --save-dev)
7.压缩图片 gulp-imagemin (npm install gulp-imagemin --save-dev)
8.重命名 gulp-rename (npm install gulp-rename --save-dev)
9.压缩html页面 gulp-htmlmin (npm install gulp-htmlmin --save-dev)
第五步:接下来就是操作指令了
打开左侧的gulp就出现了咱们自己之前命名的数据名了
然后直接右击run就可以了 ,你会神奇的看到文件打包压缩了
还有特殊情况,没有gulp标志的 ,就只能在命令行输入 gulp + 自己命名的文件名 回车即可
好了,基本能用到的常用指令都在这,在下小白一枚,文章如有错误之处,留言望指教~