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

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

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

一 gulp的安装

1 安装node.js

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

1.2、安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)

2、使用命令行

简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用;

cd定位到目录,用法:cd + 路径 ;

dir列出文件列表;

cls清空命令提示符窗口内容。

3 npm

1 简介 npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

2 用npm安装插件 命令提示符执行npm install <name> [-g] [--save-dev]

<name>:node插件名称。-g:全局安装。,全局安装可以通过命令行在任何地方调用它。

--save:将保存配置信息至package.json(package.json是nodejs项目配置文件

-dev:保存至package.json的devDependencies节点

3 npm 的一些用法

① 卸载插件

使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]

删除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat ……

借助rimraf:npm install rimraf -g 用法:rimraf node_modules

②更新插件

使用npm更新插件:npm update <name> [-g] [--save-dev]

更新全部插件:npm update [--save-dev]

③查看帮助 npm help

④查看已安装的插件 npm list

4 选装cnpm

npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所淘宝创造了另外一款 cnpm(cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm)

安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

5、全局安装gulp

目的:通过她执行gulp任务

安装过程:命令提示符执行cnpm install gulp -g(命令提示符执行gulp -v,出现版本号即为正确安装。)

6、新建package.json文件

注:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

json文件如下:(注意:json文件内是不能写注释的,复制下列内容请删除注释)

{
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "This is for study gulp project !", //项目描述(必须)
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}

当然我们可以手动新建这个配置文件,命令提示符执行cnpm init。

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

 7、本地安装gulp插件

安装:定位目录命令后提示符执行cnpm install <name> --save-dev

以gulp-less为例(编译less文件),命令提示符执行cnpm install gulp-less --save-dev

它会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md

并且我们还要安装本地gulp确保正常使用cnpm install gulp --save-dev

8、新建gulpfile.js文件(重要)

gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)

这个文件大概是这样的:

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less'); //定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
}); gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务 //gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

9、运行gulp

运行操作   命令提示符执行gulp 任务名称

编译less:命令提示符执行gulp testLess

gulp入门详情的更多相关文章

  1. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  2. bower安装使用入门详情

    bower安装使用入门详情   bower自定义安装:安装bower需要先安装node,npm,git全局安装bower,命令:npm install -g bower进入项目目录下,新建文件1.tx ...

  3. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  4. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  5. Gulp入门与解惑

    Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...

  6. Github入门详情教程

    前言 之前我写了一篇文章<一篇文章了解Github和Git教程>还延伸了几篇阅读,对大部分小白很有用,那么我继续普及下Github页面及其概念. 定义 GitHub 是一个网站,一个面向开 ...

  7. gulp 入门使用

      gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...

  8. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  9. gulp入门与一些基本设置

    这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...

随机推荐

  1. Swagger简单实例

    随着技术的不断发展,网站框架也开始向:前后端分离的形态发展,而且前端技术和后端技术在各自的道路上越走越远.而web api 接口成了前后端唯一的联系.所以web api会变得越来越重要. 那么什么是W ...

  2. Mysql内置功能《六》流程控制

    一 流程控制 delimiter // CREATE PROCEDURE proc_if () BEGIN declare i int default 0; if i = 1 THEN SELECT ...

  3. JavaScript数组升降序排列、最大值、最小值等

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 面向对象中的__slots__

    类中的__slots__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性. 而要限制class的属性就需要用到__sl ...

  5. jquery事件三 -- load(), ready(), resize()以及bind()事件

    例子1 ready() DOM加载完毕 load() 元素加载完毕 resize() 浏览器窗口的大小发生变化 <!DOCTYPE html> <html lang="en ...

  6. miniui中表单验证规则总结

    页面链接: http://www.miniui.com/demo/#src=form/rules.html 页面效果图: 页面代码: <!DOCTYPE html PUBLIC "-/ ...

  7. centos6 编译安装nodejs4.3

    官网下载源码包 https://nodejs.org/en/download/ source code #下载 wget https://nodejs.org/dist/v4.3.2/node-v4. ...

  8. 1.jQuery入口函数

    <!--注意,如果需要对ie67兼容,我们可以使用原生低版本的jquery 比如说jquery-1.12.4.js--> <!DOCTYPE html> <html la ...

  9. Java中不通过构造方法创建对象的方法总结

    我们常说,Java是一种面向对象的语言,因而在Java中几乎所有的操作都离不开对象.而在Java语言中,最常见的创建对象的方法是通过对类构造器的调用,除此之外,其实还有下面几种可以创建对象的方法. 1 ...

  10. Java的定时调度

    一般在web开发中定时调度比较有用,因为要维护一个容器不关闭才可以一直定时操作下去. 定时调度:每当一段时间之后,程序就会自动执行,就称为定时调度.如果要使用定时调动,则必须要保证程序要始终运行着,也 ...