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. C#生成二维码(加源码)

    使用工具: Visual Studio(VS) 2013 第一步: 要用到一个类:QRCodeEncoder 这个类要添加一个动态库:ThoughtWorks.QRCode.dll(项目中有带) 然后 ...

  2. 三个数组求中位数,以及中位数的中位数----java算法实现

    求三个数组的中位数,以及中位数的中位数.   import java.util.Arrays; public class median { public static void main(String ...

  3. leetcode 16. 3Sum Closest JAVA

    题目: 给定一个包括n个整数的数组nums和一个目标值target.找到nums中的三个整数,使得他们之和与target最为接近.返回三个整数之和,假定每组输入只存在唯一答案 解题思路: 将nums数 ...

  4. POJ - 2031C - Building a Space Station最小生成树

    You are a member of the space station engineering team, and are assigned a task in the construction ...

  5. CentOS6.9 minimal版本安装图形化界面

    CentOS6.9 minimal版本安装图形化界面 安装步骤如下: 1.安装Desktop组 # yum groupinstall "Desktop" -y 2.安装X Wind ...

  6. [ActionScript 3.0] AS3 弹性运动

    package com.views { import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; ...

  7. gitlab容器--带https配置

    #2.gitlab 重要目录 /home/maks/gitlab/config /etc/gitlab /home/maks/gitlab/logs /var/log/gitlab /home/mak ...

  8. iOS 音频/视频 学习目录

    参考 iOS原生API  音/视频录制 编辑 https://www.cnblogs.com/kenshincui/p/4186022.html#summary iOS视频编解码常用库比较 http: ...

  9. 基础篇:6)形位公差标注(GD&T标准)-总章

    本章目的:理解GD&T概念,读懂和绘制GD&T图纸.本章是GD&T指引章节. 1.GD&T概念 GD&T  是 Geometric  Dimensioning ...

  10. Codeforces - tag::graphs 大合集 [占坑]

    520B 给定初始n和目标m,存在两种操作\(-1\)和\(×2\),要求最少操作次数 无脑解法是BFS,不能解决稍大的规模 当n>m时,输出n-m 否则逆向处理,转换为m到n的最小操作次数,存 ...