简介:
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅对网站资源进行优化,而且在开发过程中很多重复的任务,他可以通过明确的工具自动完成,使用它我们不仅可以很愉快的编写代码,而且大大的提高了我们的工作效率。
gulp是基于Node.js的自动化任务运行器,它能自动化的完成JavaScript、coffee、sass、less、html、image、css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,它借助了Unix操作系统的管道(pipe)思想,前一级的输出等于后一级的输入,使操作非常的简单。通过本文,我们将学习如何使用gulp来改变开发流程,从而使开发更加高效。
gulp与grunt非常类似,但相比于grunt非常频繁的IO操作,gulp的流操作,能更快捷的完成构建工作。
本文以gulp-pug为例(将pug编译为html的gulp插件)展示gulp的基本用法,只要我们学会一个插件之后,其他插件可以看一下帮助文档
gulp常用地址:
gulp官方网址:http://gulpjs.com
gulp插件地址:http://gulpjs.com/plugins
gulp官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp中文API:http://www.ydcss.com/archives/424
gulp构建流程
安装nodejs-->全局安装gulp-->项目安装gulp以及gulp插件 -->配置gulpfile.js-->运行任务
1.安装nodejs
说明:gulp是基于nodejs,所以需要配置node环境
安装方法:打开nodejs官网,点击Download按钮,它会根据系统信息选择对应的版本(.msi文件)。然后直接安装就可以了
2.使用命令行(熟悉命令行可跳过此步)
说明:命令行在OSX是终端(Teminal),在Windows是命令提示符(Command Prompt);
注意:之后操作都是在Windows系统下
简介:
打开命令的方式(window+r 输入cmd回车)
node -v 查看安装的nodejs版本号,出现版本号证明安装成功,未出现请重启重试
npm -v 查看npm版本号,npm是随着nodejs一同安装的nodejs包管理器
cd 定位到目录,用法:cd+路径;
dir 列出文件列表
cls清空命令提示符窗口内容
3.npm介绍
说明:npm(node package manager)nodejs的包管理器,用于nodejs插件的安装、卸载、管理依赖等;
安装插件:
命令提示符执行 npm install <name> [-g] [--save-dev];
<name>: nodejs插件的名称;例如npm install pug --save-dev
-g:全局安装。将会安装到C:\Users\Administrator\AppData\Roaming\npm,并且写入环境变量;非全局安装:将会安装到当前定位目录;全局安装可以通过命令行在任何地方调用,本地安装会在定位目录的node_modules文件夹下,通过require()调用;
--save:将保存配置信息到package.json(package.json是nodejs项目配置文件)
-dev:保存到package.json的devDependencies节点,不指定-dev将保存到dependencies节点
卸载插件:
命令提示符执行 npm uninstall <name> [-g] [--save-dev]
删除全部插件 借助rimraf npm install rimraf -g 用法: rimraf node_modules
更新插件
命令提示符执行 npm update <name> [-g] [--save-dev]
更新全部插件: npm update [--save-dev]
查看npm帮助
命令提示符执行 npm help
当前目录已安装插件
命令提示符执行 npm list
npm安装插件过程是从:http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),解决办法往下看↓↓↓↓↓↓。
4.选装cnpm
说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事,来自官网:
这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
官方网址:http://npm.taobao.org;
安装:
命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org ;
cnpm和npm用法完全一致,只是在执行命令的时候把npm改成cnpm
5.全局安装gulp
说明:全局安装gulp是为了通过它执行gulp任务
安装:
命令提示符执行 cnpm install gulp -g ;
查看是否正确安装,命令提示符执行 gulp -v ;出现版本号证明安装成功
6.新建package.json文件
说明:package.json是nodejs项目中必不可少的配置文件,它包含了nodejs的配置信息以及插件信息
{
"name": "font-test", /*项目名称*/
"version": "1.0.0", /*项目版本*/
"description": "font-size", /*项目介绍*/
"main": "gulpfile.js", /*执行js入口*/
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.1",
"browser-sync": "^2.18.8",
"compass": "^0.1.1",
"gulp": "^3.9.1",
"gulp-changed": "^2.0.0",
"gulp-compass": "^2.1.0",
"gulp-html-beautify": "^1.0.1",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^7.0.0",
"gulp-pug": "^3.3.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"precss": "^1.4.0",
"pug": "^2.0.0-beta.12",
"cssgrace": "^3.0.0"
},
"dependencies": {
"express": "^4.15.2",
"pug": "^2.0.0-beta.12"
}
}
我们可以使用命令行工具来配置它: cnpm init
查看package.json帮助文档,命令提示符执行cnpm help package.json
特别注意:package.json是一个普通的json文件,所以不能添加任何注释。
7.本地安装gulp插件
安装:定位到项目目录后,执行 cnpm install <name> --save-dev
实例:安装gulp-pug,执行 cnpm install gulp-pug --save-dev
将会安装到node_modules的gulp-pug目录下
为了能正常使用,我们还得本地安装gulp cnpm install gulp --save-dev
全局安装gulp是为了执行gulp命令,本地安装gulp是为了调用gulp插件功能
8.新建gulpfile.js文件(重要)
说明:gulpfile.js是gulp项目的配置文件,一般位于项目根目录(需要在package.json的main中指定该文件)
(package.json设置图)
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
var browserSync = require("browser-sync").create(); //编译pug
gulp.task("pug:compile",function() {
gulp.src("src/*.pug")
.pipe(plugins.changed("./build/",{extension:".html"}))
.pipe(plugins.pug({
pretty:"\t"
}))
.pipe(gulp.dest("./build/"))
})
9.运行gulp
说明:命令提示符执行 gulp+任务名称
当执行gulp就是执行gulp default的所有任务;
gulp环境搭建的更多相关文章
-
前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
-
gulp 环境搭建
wind+r弹出cmd命令窗口 要先安装node及npm,检查是否安装成功,node -v,npm -v可查看nod及npm的版本号. 安装gulp之前我们需要安装nodejs的环境,检测能够正常使用 ...
-
gulp环境搭建,gulp入门教程
gulp常用地址: gulp官方网址:http://gulpjs.com gulp插件地址:http://gulpjs.com/plugins gulp 官方API:https://github.co ...
-
gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
-
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...
-
Gulp实例(包括环境搭建的自动检测)
# Gulp实例(包括环境搭建的自动检测) Gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面我将完成如下的功能点并且附上源码: CSS文件打包 less文件打包 s ...
-
ES6环境搭建及react-router学习
一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...
-
.Net Core + Angular2 环境搭建
环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...
-
Window 64bit环境搭建Web Starter Kit
最近在学习https://developers.google.com/web/fundamentals/这里的内容,其中就有一部分是安装Web Starter Kit的教程,我总结一下自己的安装过程. ...
随机推荐
-
cordova ios --->;OC 调用 js (一)
1.在HTML中定义一个函数如OCcallJS() function OCcallJS(){ alert("OC 调用js 的 方法"); } 2.当webview 加载完成的时候 ...
-
js正则表达式中=s.g表示什么意思
//g是全局匹配//中间的内容表示:匹配以=开关,后面是0或多个空格,然后是双引号括起来的任意字符,比如:= "any symble" 匹配 = " asfjaskldf ...
-
关于PCB布线的顺序到底是怎样才合理?
有人说先布好电源线和地线,让它们尽量靠近走,然后再考虑信号线:也有人说先布好关键的信号线,然后再走电源和地线:还有人说先布好电源线,再布信号线,地线最后布.到底怎么样才算好呢?或者说,一般应按照什么顺 ...
-
wildfly-9.0.2 web项目部署详细步骤
一.配置操作系统环境变量 JAVA_HOME = C:\Program Files (x86)\Java\jdk1.7.0_67 JBOSS_HOME = F:\server\wildfly-9.0. ...
-
OpenCL memory object 之 Global memory (2)
转载自:http://www.cnblogs.com/mikewolf2002/archive/2011/12/18/2291584.html 当我们用clCreateBuffer, clCreate ...
-
Storm的数据可靠性(理论)
Storm的数据可靠性(理论) .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB& ...
-
Hexo+NextT基本设置【3】
该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要 或许在你看到我这篇我文章之前,你已经成功的通过Git ...
-
app升级注意事项version
1.每次升级生成apk前,修改versionName: 位置: 2.修改数据库表中对应version字段与之对应: 3.出现waiting for debugger,要重启手机: 5.解析包错误,是a ...
-
Maven 属性
maven 中使用 ${属性名} 来访问属性 内置属性 (maven 预定义,用户可以直接使用的属性) ${basedir} 表示项目根目录,即包含 pom.xml 文件的目录.同 ${projec ...
-
nginx负载均衡二:配置
配置方法一(可用): upstream tomcatserver1 { server ; server 192.168.70.172; server 192.168.70.173 down; serv ...