gulp构建工具的安装与使用

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

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

时间: 2024-10-17 18:07:28

gulp构建工具的安装与使用的相关文章

配置gulp构建工具(坤爷)

配置gulp构建工具 gulp是前端构建工具,相关项目可参考本文档配置gulp.代码部分是需要在命令行里执行的命令,如果提示权限相关问题(多为mac os),尝试以管理员重新执行命令,即命令前加上(注意后面有空格):sudo 1. 下载并安装nodejs(已安装过忽略本步骤) 2. 全局安装gulp(已安装过忽略本步骤) npm install gulp -g3. 安装node依赖 cd到项目根目录执行: npm install执行后将产生node_modules文件夹存放node的依赖模块wi

Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp pe

gulp 构建工具

1. gulp 的简介 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率.gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些

ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp performance和优雅的语法受到欢迎.与Grunt不同,Grunt往往在硬盘上是

gulp构建工具学习汇总

前端脚手架____gulp配置文件------- https://pan.baidu.com/s/1eSs7COy 1:有了package.json 直接 npm install自动下载相应的npm包 2:多个项目同时监听---开两个bash---改变gulp-live-server模块端口号 如果在同一个bash下构建多个项目 每次都要调整gulp任重中的目录地址 gulp构建任务一般项目中都很类似,开两个bash比较方便 单个项目目录结构 npm install 安装依赖包 解决window

Bazel构建工具的安装

官方Doc:https://docs.bazel.build/versions/master/install-ubuntu.html 使用Bazel定制的APT存储库 (recommended) 1. Install JDK 8 安装JDK 8使用下面命令:: sudo apt-get install openjdk-8-jdk 在 Ubuntu 14.04 LTS你可能需要使用 PPA: sudo add-apt-repository ppa:webupd8team/java sudo apt

使用gulp构建工具

之前一个demo中用的是grunt,照着grunt用到的插件找了下gulp的,总体使用还算顺畅,说实话并不觉得学习成本有降低什么的,差不多.不过也遇到一些问题: 1.gulp.dest()输出目录需要用"./"而不能"/" 2.gulp的jshint有些规则检测不到,而grunt却检测到了,可以用"asi": true测试下.(据说现在大家都用eslint代替jslint,看了下有eslint180条左右的规则,吓cry了好么.) 3.gulp任

前端自动化构建工具gulp记录

什么是gulp 答:Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新.. 为什么要用gulp? 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合并,减少http请求:文件压缩,减少文件体积,加快下载速度: 3.效率提升:

用gulp构建你的前端项目

前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处 易于学习使用 通过最少的API(核心.src().