gulp环境搭建

时间:2023-01-10 14:59:18

简介:

  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清空命令提示符窗口内容

gulp环境搭建

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

gulp环境搭建

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


特别注意:package.json是一个普通的json文件,所以不能添加任何注释。

7.本地安装gulp插件

  安装:定位到项目目录后,执行 cnpm install <name> --save-dev

  实例:安装gulp-pug,执行 cnpm install gulp-pug --save-dev

gulp环境搭建

将会安装到node_modules的gulp-pug目录下

为了能正常使用,我们还得本地安装gulp  cnpm install gulp --save-dev


全局安装gulp是为了执行gulp命令,本地安装gulp是为了调用gulp插件功能

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

  说明:gulpfile.js是gulp项目的配置文件,一般位于项目根目录(需要在package.json的main中指定该文件)

gulp环境搭建

(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环境搭建的更多相关文章

  1. 前端自动化构建工具——gulp环境搭建教程

    gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...

  2. gulp 环境搭建

    wind+r弹出cmd命令窗口 要先安装node及npm,检查是否安装成功,node -v,npm -v可查看nod及npm的版本号. 安装gulp之前我们需要安装nodejs的环境,检测能够正常使用 ...

  3. gulp环境搭建,gulp入门教程

    gulp常用地址: gulp官方网址:http://gulpjs.com gulp插件地址:http://gulpjs.com/plugins gulp 官方API:https://github.co ...

  4. gulp&plus;Babel 搭建ES6环境

    Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...

  5. 基于 Express&plus;Gulp&plus;BrowserSync 搭建一套高性能的前端开发环境

    基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...

  6. Gulp实例(包括环境搭建的自动检测)

    # Gulp实例(包括环境搭建的自动检测) Gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面我将完成如下的功能点并且附上源码: CSS文件打包 less文件打包 s ...

  7. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  8. &period;Net Core &plus; Angular2 环境搭建

    环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...

  9. Window 64bit环境搭建Web Starter Kit

    最近在学习https://developers.google.com/web/fundamentals/这里的内容,其中就有一部分是安装Web Starter Kit的教程,我总结一下自己的安装过程. ...

随机推荐

  1. cordova ios ---&gt&semi;OC 调用 js &lpar;一&rpar;

    1.在HTML中定义一个函数如OCcallJS() function OCcallJS(){ alert("OC 调用js 的 方法"); } 2.当webview 加载完成的时候 ...

  2. js正则表达式中&equals;s&period;g表示什么意思

    //g是全局匹配//中间的内容表示:匹配以=开关,后面是0或多个空格,然后是双引号括起来的任意字符,比如:= "any symble" 匹配 = " asfjaskldf ...

  3. 关于PCB布线的顺序到底是怎样才合理?

    有人说先布好电源线和地线,让它们尽量靠近走,然后再考虑信号线:也有人说先布好关键的信号线,然后再走电源和地线:还有人说先布好电源线,再布信号线,地线最后布.到底怎么样才算好呢?或者说,一般应按照什么顺 ...

  4. wildfly-9&period;0&period;2 web项目部署详细步骤

    一.配置操作系统环境变量 JAVA_HOME = C:\Program Files (x86)\Java\jdk1.7.0_67 JBOSS_HOME = F:\server\wildfly-9.0. ...

  5. OpenCL memory object 之 Global memory &lpar;2&rpar;

    转载自:http://www.cnblogs.com/mikewolf2002/archive/2011/12/18/2291584.html 当我们用clCreateBuffer, clCreate ...

  6. Storm的数据可靠性&lpar;理论&rpar;

    Storm的数据可靠性(理论) .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB& ...

  7. Hexo&plus;NextT基本设置【3】

    该系列博客列表请访问:http://www.cnblogs.com/penglei-it/category/934299.html 摘要      或许在你看到我这篇我文章之前,你已经成功的通过Git ...

  8. app升级注意事项version

    1.每次升级生成apk前,修改versionName: 位置: 2.修改数据库表中对应version字段与之对应: 3.出现waiting for debugger,要重启手机: 5.解析包错误,是a ...

  9. Maven 属性

    maven 中使用 ${属性名} 来访问属性 内置属性 (maven 预定义,用户可以直接使用的属性) ${basedir}  表示项目根目录,即包含 pom.xml 文件的目录.同 ${projec ...

  10. nginx负载均衡二:配置

    配置方法一(可用): upstream tomcatserver1 { server ; server 192.168.70.172; server 192.168.70.173 down; serv ...