gulp 初探

一、gulp 的简介

基于 node.js 流的自动化构建工具,可以快速构建项目并减少频繁的 I/0 操作,还可以利用 gulp 插件完成各种自动化任务。gulp 是基于 node.js 的自动任务运行器,它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,它借鉴了 Unix 操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用 gulp 来改变开发流程,从而使开发更加快速,高效。

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

gulp 学习常用地址:

gulp 官方网址:https://gulpjs.com/

gulp 插件地址:https://gulpjs.com/plugins/

gulp 官方 API:http://www.gulpjs.com.cn/docs/api/

gulp 中文文档:http://www.gulpjs.com.cn/docs/

淘宝 npm 镜像站:http://npm.taobao.org/

二,安装 node.js 和 npm(gulp 和 gulp 插件是通过 npm 安装并管理的,npm 是 node.js 的包管理器)

1、node.js 下载地址

http://www.nodejs.org/download/

2、安装完成后,可通过命令行更新 npm 版本,保证是最新的

npm  update npm  -g

PS:安装好 node.js 之后,可以在你的终端中输入“node -v”命令来查看 node.js 的版本,也顺便检测 node.js 是否安装成功。

3、安装 cnmp 命令(选装)

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

PS:npm 安装插件是从国外服务器下载,受网络影响大,甚至还会遇到需要翻墙才能下载插件的情况,因此推荐安装 cnpm。cnpm 跟 npm 用法完全一致,只是在执行命令时将 npm 改为 cnpm。

4、检测 cnpm 是否安装成功

cnpm -v                // 显示版本号即安装成功

三、安装 gulp

1、提供 package.json 配置文件(package.json 文件用于保存项目元数据)

{      "name": "demo",                         "version": "1.1.0",                     "description": "demo",             "devDependencies": {            "gulp": "^3.8.11"       }}

PS:package.json 是我们 gulp 项目的核心配置文件,用于设置将要执行操作的项目名称,版本,描述,依赖等信息,其格式为 json 数据格式。package.json 文件是每个 gulp 项目必备的文件,因此首要条件需要先创建这个文件。创建 package.json 文件方式有很多种:

1、在终端通过“npm init”命令自动创建一个基本的 package.json 文件;

2、从官网上复制或者下载一个 package.json 文件;

3、手工创建一个 package.json 文件;

2、全局安装 gulp

npm install -g gulp

3、在终端下通过命令进入到项目的根目录

cd F:\wamp\www\gulp            // 切换到项目根目录

4、作为项目的开发依赖安装(本地安装)

npm install --save-dev gulp

PS:全局安装 gulp 是为了执行 gulp 任务,本地安装 gulp 则是为了调用 gulp 插件的功能。

5、执行“npm install”命令安装项目依赖的插件(安装成功后会在项目根目录下的  node_modules 文件夹里)

npm install    // 此命令会批量安装 package.json 文件内 "devDependencies" 中所有依赖插件

6、在配置好 package.json 文件后也可以使用命令安装 gulp 项目依赖的插件(package.json 文件会自动更新)

npm install gulp-rename --save-dev

PS:这种安装一律是如下形式: npm install <module> –save-dev,不仅会安装指定的 <module> 插件,还会将插件信息自动添加到  package.json 文件的 "devDependencies" 区域中,且包括插件名称,版本范围。

四、gulpfile.js  文件的配置(package.json 和 gulpfile.js 文件都要放置到项目的根目录下)

1、提供 gulpfile.js 配置文件

// 装载 gulp 插件var gulp = require(‘gulp‘); 

// 自定义任务gulp.task(‘default‘, function() {              // 将你的默认的任务代码放在这});

2、最后在终端运行 gulp

gulp

五、gulp 常用插件介绍

gulp-uglify —— 压缩 javascript 文件; gulp-minify-css —— 压缩 css 文件;gulp-concat —— 合并文件; gulp-jshint —— js 文件语法检测;gulp-sass —— sass 编译;gulp-less —— less 编译; gulp-autoprefixer —— 自动添加 css 前缀; gulp-imagemin —— 图片压缩;gulp-livereload —— 浏览器自动刷新;    gulp-rename —— 文件重命名; 

PS:以上这些插件,本套教程不会全部讲到。但是随着讲解其中的一部分,我想你就能掌握使用 gulp 插件的方法。知道方法了,然后你就可以参考官方文档去使用你想要的插件。

六、总结

1、安装 node.js 和 npm;

2、新建 package.json 文件;

3、全局和本地安装 gulp;

4、安装 gulp 插件;

5、新建 gulpfile.js 文件;

6、通过命令提示符运行 gulp 任务;

时间: 2024-11-05 14:38:00

gulp 初探的相关文章

gulp初探

gulp初探 gulp是基于node.js的一个前端构建系统.它能通过自己主动运行常见任务,比方编译预处理CSS,压缩JavaScript和刷新浏览器.来改进站点的开发流程. gulp安装 1.假设没有安装node.js.请先去node管网安装最新版node.js; 2.安装了node后,在全局安装gulp: npm install -g gulp 3.然后.在项目里安装Gulp: npm install --save-dev gulp Gulp使用 如今我们创建一个Gulp任务来压缩JavaS

gulp和webpack初探

gulp 真正“流程”化工具 我记得实习刚刚进公司看到grunt,还是有点蒙,之前一直是本地开发,游览器F5,没想到前端也需要“编译工具”.所以grunt一直给我的感觉是“编译工具”,你写的很多代码还不能直接“执行”,需要这一个工具去“编译”才能上线.它去自动化了很多东西,我之后也写过一个公司用的grunt插件,只需要配置,之后加入任务执行,很方便.但当我看到gulp的代码的时候(还没开始看文档,API),我突然意识到很多grunt“不自然”的设计,gulp真正的做到了清晰的流程化的构建. gu

细说gulp

细说gulp 一.概述&安装 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. 好了,废话不多说了.既然要了解Gulp,就得先安装它. Gulp是基于node来实现的,so你得先有个node环境(见“初探nodeJS”). node环境有了后,安装Gulp就很easy咯. 命令行中,输入npm install gul

初探百度F.I.S — 由工具到解决方案

1. 前言 阅兵放假三天,我哪儿也没去,宅着看了一些东东:git命令行.svn命令以及下面的主角——百度FIS.对看过的git.svn的命令也做了一些总结,请参见:<git命令学习笔记>和<svn命令学习笔记> 另外,我是开源富文本编辑器 wangEditor 的作者,欢迎大家关注我的项目.下文也会结合我在开发该编辑器过程中的经历,来对比说百度FIS 在查看下文之前,可以先说一下我初探百度FIS,对它的一个总结——由工具到解决方案.不知道大家对“工具”和“解决方案”这两个词如何理解

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

进阶之初探nodeJS

一.前言 在"初探nodeJS"随笔中,我们对于node有了一个大致地了解,并在最后也通过一个示例,了解了如何快速地开启一个简单的服务器. 今儿,再次看了该篇随笔,发现该随笔理论知识稍多,适合初级入门node,固萌生一个想法--想在该篇随笔中,通过一步步编写一个稍大一点的node示例,让我们在整体上更加全面地了解node. so,该篇随笔是建立在"初探nodeJS"之上的,固取名为"进阶之初探nodeJS". 好了,侃了这多,那么我们即将实现一个

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

git上传文件到github与gulp的简单使用

git有两种方式提交源代码到github 第一种方式通过地址提交下面介绍的是通过ssh方式上传 git使用ssh方式上传代码到githubgit首先要生成公钥和私钥 将公钥添加到github中将私钥保存在本地 + 命令:`ssh-keygen -t rsa`生成的公钥与私钥文件会在当用户目录的.ssh目录下. 把代码push到服务器时需要先pull一下(pull的作用是从远程下载git项目里的文件,然后将文件与本地的分支进行merge) git pull和gitclone区别:git pull