gulp 基本使用
1, gulp 依赖node, 使用gulp 之前,要先安装node. Node 安装完成后,它自带npm.
Npm: node package manager 就是node 包管理器. 用过java 的就知道,java 有许多包,我们使用一个包的时候,要先引入 import 这个包。Node 也是一样,当我们使用一个包时,就需要先安装它, npm install 包名。
2, Node 安装完成, 按window +r 组合键,调用运行窗口,输入cmd, 打开windows 自带的命令窗口。输入npm install –g gulp, 就可全局安装gulp(g就是global 全局的意思)。
所谓全局安装,就是指我们可以在命令行中使用glup 命令。Gulp 安装完成后,你直接在命令行中输入gulp -v , 它就输出了 gulp 的版本号。这也证明,我们可以在命令行中,直接使用gulp 命令。 这和java 的配置环境变量一样,如果要想在命令行中使用java 命令,就必须手动配置环境变量,npm install –g 安装之后,我们就省略掉这一步,直接使用。
3, 这时,我们就可以开始我们的项目了。比如,进入到e: 盘,新建一个空文件夹,命名为gulp。打开该文件夹,首先要做的是创建 一个package.json文件。这个文件主要是对整个 项目进行描述,项目名字,版本号,最主要是 对开发这个项目的依赖进行管理。怎样才能快速建立这个文件? 进入到该文件夹下,按住shift键,右击鼠标, 单击“在此处打开命令窗口”,打开命令窗口,输入 npm init , 按要求进行添写,注意,命名(name) 不能用大写。
4, gulp 工作主要是通过插件完成,这里我们就用一下gulp-less 插件。准备工作:在gulp 文件夹下,新建index.html, less文件夹, less 文件夹下再建style.less文件。
在该文件夹下,打开命令行:npm install gulp gulp-less –save-dev, 本地安装gulp 和gulp-less 插件。所谓本地安装,其实就是只能在该项目文件夹下使用, 安装完成后,在文件中,你能看到多了一个node_modules 文件夹,它里面就包括我们安装的gulp 和gulp-less。 --save-dev, 保存到开发依赖中,dev 就是development, 指的就是开发环境。这时,打开package.json文件,你们会看到多了,devDependencies 字段,下面是gulp和gulp-less 及版本号。
5, 还差一步,那就是gulp的配置文件,gulpfile.js 文件。我们什么工具都有了,那要告诉gulp干什么事情, 这就是gulpfile.js文件做的事情,定义任务。在gulp文件夹下(项目根目下),新建gulpfile.js文件。先写一个简单的任务,把less转化成css。
- var gulp = require("gulp");
- var less = require("gulp-less");
- gulp.task("less", function(){
- gulp.src("less/style.less")
- .pipe(less())
- .pipe(gulp.dest("build"))
- })
6,在gulp根目录文件夹下,打开命令行,输入gulp less, 结束后,你可以看到,文件夹下多了一个build文件夹,并且里面有style.css 文件,打开index.html, 引入style.css, 可以看到样式起作用了。这证明,gulp任务完成。
首先,我们看到声明了两个变量。上面说到,本地安装的时候,只能在该项目下面使用,就是说的下面这两句。 因为,node 遵循的是CommonJS 规范, 通过require加载模块文件,进行使用。
var gulp = require(“glup”);
var less = require(“gulp-less”)
后面就是gulp 的api, gulp.task, gulp.src, gulp.dest, 和 pipe。 pipe是管道的意思,这也是gulp所说的它是其于流的构建工具。前一个的输出,变成后一个输入。
gulp.task(): 为gulp 定义一个任务,首先必须有任务名,这样我们才能告诉gulp 执行哪个任务,比如,在命令行中,输入glup less 就是执行我们定义的less命令。其次这个任务做什么事情,其实还有最一个可选,就是我们这个任务要不要等其他任务完成才执行,如果是,那就需要把这个依赖写到任务中,所以它接受两个必须参数,和一个可选参数。
gulp.task(name, dependes, func):
name: 就是任务名,它是一个字符串,注意命名中不能有空格,要不然,命令行中无法执行。dependes(可选): 定义完成这个任务之前,必须先执行完成哪些任务,因此,它是一个数组列表,依次列出要先完成的任务如:[“a”, “b”]。func: 函数: 定义这个任务要做的事性。
如果,我们想把css 再压缩,那就需要先把less 转化css, 再进行压缩, less转为化css 就必须先执行,这就是依赖dependes. 要压缩css, 需要引入gulp-minify-css 插件,同时 引入gulp-rename 插件可以对压缩后的文件进行重命名, 写一个压缩任务minifycss, 对三个参数进行说明。
- gulp.task("minifycss", ["less"], function(){
- gulp.src("build/style.css")
- .pipe(minifycss())
- .pipe(rename({suffix: '.min'}))
- .pipe(gulp.dest("build"))
- })
这时,命令行中执行gulp minifycss 命令并没有使我们的网页发生变化,原来这个命令只是执行了less 任务, less转为化css 。一个命令只能执行一个任务,但它保证了任务的按顺序执行, 再执行gulp minifycss 命令, 网页发生了变化。 但是后来发现,这是我的一个错误认识。上文说到,gulp 是基于流的操作。gulp 执行minifycss 任务时依赖less, 因此 less 执行完后,必须要返回一个流,这个流再流入minifycss,这样就可以连续执行了。但我们的less任务没有返回值,所以执行完less任务后就中断了。less任务修改一下,加return, 这样执行一个gulp minifycss 命令就可以了。
- gulp.task("less", function(){
- return gulp.src("less/style.less")
- .pipe(less())
- .pipe(gulp.dest("build"))
- })
为了减少在命令行中的输入,可以定义默认任务,定义之后,直接在命令行中输入gulp,就可以执行任务。定义方式:gulp.task("default", ["minifycss"]). gulpfile.js文件如下,命令行中输入gulp 可以才测试。
- var gulp = require("gulp");
- var less = require("gulp-less");
- var minifycss = require("gulp-minify-css");
- var rename = require('gulp-rename');
- // less --> css
- gulp.task("less", function(){
- return gulp.src("less/style.scss")
- .pipe(less())
- .pipe(gulp.dest("build"))
- })
- // 压缩css
- gulp.task("minifycss", ["less"], function(){
- gulp.src("build/style.css")
- .pipe(minifycss())
- .pipe(rename({suffix: '.min'}))
- .pipe(gulp.dest("build"))
- })
- // 定义默认任务
gulp.task("default", ["minifycss"]);
gulp.src():指定任务要处理的文件,因此,它接受一个必须的参数:文件的路径, 它还有一个可选的options, 对它进行配置,这时没有具体研究。gulp.src(“文件路径”[, options])
文件路径可以是具体的路径,可以是通配符路径:具体如下:
“src/a.js”:指定具体文件;
“*”:匹配所有文件 例:src/*.js(包含src下的所有js文件);
“**”:匹配0个或多个子文件夹 例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);
“{}”:匹配多个属性 例:src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);
“!”:排除文件 例:!src/a.js(不包含src下的a.js文件);
gulp.dest(): 指定任务完成后生成的文件放到什么地方,因此它接受一个必须的参数:文件的路径, 和 gulp.src 一样,它还有一个可选的options, 对它进行配置,gulp.dest(“文件路径”[, options])。
gulp 还有一个api,我们没有用到,这就是gulp.watch(), 它对文件变动进行监听,如果文件变动之后,它要做哪些事情。因此,它接受两个必须的参数,要监听的文件,执行的任务列表。 如gulp.watch('less/*.less', ['less','minifycss']); 如果.less文件发生变化,gulp 自动执行less 和minifycss 任务。 定义一个watch任务并执行,修改一下.less 文件,可以看到style.css 和min.css 文件同时变化了,刷新浏览器,也变化了。
- gulp.task("watch", function(){
- gulp.watch("less/*.less", ["less", "minifycss"])
- })
gulp.watch还能返回一个对象发射change 事件,它接受一个回调函数,change 完成后,执行的事情, 修改上面的代码如下, 执行gulp命令可以看到控制台输出1
- gulp.task("watch", function(){
- var watch = gulp.watch("less/*.less", ["less", "minifycss"]);
- watch.on('change', function(){
- console.log(1);
- })
- })
gulp 最基本的就这些了,整个配置文件如下:
- var gulp = require("gulp");
- var less = require("gulp-less");
- var minifycss = require("gulp-minify-css");
- var rename = require('gulp-rename');
- // less --> css
- gulp.task("less", function(){
- return gulp.src("less/style.less")
- .pipe(less())
- .pipe(gulp.dest("build"))
- })
- // 压缩css
- gulp.task("minifycss", ["less"], function(){
- gulp.src("build/style.css")
- .pipe(minifycss())
- .pipe(rename({suffix: '.min'}))
- .pipe(gulp.dest("build"))
- })
- // 监听任务
- gulp.task("watch", function(){
- var watch = gulp.watch("less/*.less", ["less", "minifycss"]);
- watch.on('change', function(){
- console.log(1);
- })
- })
- gulp.task("default", ["watch"]);
gulp 基本使用的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- gulp初学
原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js 配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
随机推荐
- 接口性能测试--JMeter
1.JMeter Java Sampler介绍 setupTest做些初始化的工作,每个线程只执行一次 teardownTest做些清理工作,每个线程只执行一次 1.JMeter Java Sampl ...
- 用花生壳实现内网映射,决解无域名、无公网IP、无服务器空间问题
无域名.无公网IP.无服务器空间用花生壳提供的免费内网映射吧.你的PC就是服务器,花生壳提供的自定义二级域名轻松访问你的个人网站. 1.首先你得注册哦,然后申请免费的域名(2个) 2.设置路由器,下面 ...
- HDU - 1875 畅通工程再续
Problem Description 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问 ...
- UEditor上传图片等附件都出现红叉,该怎么解决
------解决方案-------------------------------------------------------- 引用: 在本地这样配置就没问题:var URL = window. ...
- jQuery EasyUI 使用笔记
大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...
- C++之流与文件
C++中,输入输出采用流来进行,例如iostream库中的 cin 和 cout .对文件进行读写操作也使用流.可以将文件与流关联起来,然后对文件进行操作.要将流与文件关联起来,必须像声明变量那样声明 ...
- Silverlight动态生成控件实例
刚学习Silverlight,做了一个动态创建控件的实例 实现结果:根据已有的控件类名称,得到控件的实例化对象 实现思路1:就是定义一个模板文件,将类名做为参数,在silverlight中使用Srea ...
- PowerShell vs. PsExec for Remote Command Execution
Posted by Jianpeng Mo / January 20, 2014 Monitoring and maintaining large-scale, complex, highly dis ...
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- oracle事物
要想解释oracle事物的工作流程,首先先解释几个小概念: 1.undo段的组成:段头.回滚块 2.事物ID:每一个事物都有一个自己的事物ID,就像身份证号一样. 在v$tra ...