Gulp介绍及安装使用教程
阅读原文时间:2023年07月08日阅读:3

一、简介


  gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器,不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

  gulp是基于Nodejs的自动任务运行器,她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

  gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。


二、安装node.js

  2.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;

  2.2、安装:打开nodejs官网(https://nodejs.org/en/),点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。

  注:安装完成之后注意将其配置到环境变量(系统变量path中),这样你就可以在全局范围内去使用它了

  2.3、测试:按window + r 输入cmd回车,然后输入node -v

      如果都能打印出相应版本信息,那么说明你配置成功了

三、选装cnpm

  因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。

  网址:http://npm.taobao.org

  安装:命令提示符执行

npm install cnpm -g --registry=https://registry.npm.taobao.org;

  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

     将路径C:\Users\asus\AppData\Roaming\npm\node_modules\cnpm配置到环境变量中,这样就可以在全局范围内使用cnpm命令了

  注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)

四、全局安装gulp

  在cmd中执行 :

cnpm install gulp -g

  查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装!

  注意配置环境变量(C:\Users\asus\AppData\Roaming\npm\gulp)

五、新建package.json文件

  进入自己需要的一个文件夹中:

cd F:\workspace\gulp

  创建package.json文件:

cnpm init

  在路径  下会形成这样的一个.json文件(部分内容为后添加的)

{
"name": "gulptest",//项目名称(必须)
"version": "0.0.1",//项目版本(必须)
"description": "这是一个gulp的测试程序",//项目描述(必须)
"homepage": "",   //项目主页
"main": "index.js",//入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [//关键词
"gulp"
],
"author": "wuxunxun007",//作者
"license": "ISC"//项目许可协议
"devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }

}

  查看package.json帮助文档,命令提示符执行:

cnpm help package.json

六、本地安装gulp插件

  安装:定位目录命令后提示符执行:

cnpm install gulp --save-dev;

  gulp-less为例(编译less文件),命令提示符执行:

cnpm install gulp-less --save-dev;

七、附录

 10个常用指令:

gulp-htmlmin:压缩html文件
gulp-imagemin:压缩图片
imagemin-pngquant:深度压缩png图片
gulp-cache:只压缩修改的图片
gulp-minify-css:压缩CSS文件
gulp-make-css-url-version:给css文件引用文件加版本号(文件MD5)
gulp-rev-append:通过正则(?:href|src)=”(.*)[?]rev=(.*)[“]查找并给指定链接填加版本号(默认根据文件MD5生成,因此文件未发生改变,此版本号将不会变)
gulp-uglify:使用gulp-uglify压缩javascript文件,减小文件大小
gulp-concat:使用gulp-concat合并javascript文件,减少网络请求
gulp-autoprefixer:根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章