gulp构建工具的安装与使用

Posted 2020-08-15

自开园以来一直么有发过文章，今天来跟大家一起解读下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  + 自己命名的文件名 回车即可

好了，基本能用到的常用指令都在这，在下小白一枚，文章如有错误之处，留言望指教~