gulp基本语法

pipe:用管道输送

1.gulp.src(glops[, options])

输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

1 gulp.src(‘client/js/**/*.js‘) // 匹配 ‘client/js/somedir/somefile.js‘ 并且将 `base` 解析为 `client/js/`
2   .pipe(minify())
3   .pipe(gulp.dest(‘build‘));  // 写入 ‘build/somedir/somefile.js‘
4
5 gulp.src(‘client/js/**/*.js‘, { base: ‘client‘ })
6   .pipe(minify())
7   .pipe(gulp.dest(‘build‘));  // 写入 ‘build/js/somedir/somefile.js‘

2.gulp.dest(path[, options])

能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。

1 gulp.src(‘./client/templates/*.jade‘)
2   .pipe(jade())
3   .pipe(gulp.dest(‘./build/templates‘))
4   .pipe(minify())
5   .pipe(gulp.dest(‘./build/minified_templates‘));

3.gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务(task)。

 1 var gulp = require(‘gulp‘);
 2
 3 // 返回一个 callback,因此系统可以知道它什么时候完成
 4 gulp.task(‘one‘, function(cb) {
 5     // 做一些事 -- 异步的或者其他的
 6     cb(err); // 如果 err 不是 null 或 undefined,则会停止执行,且注意,这样代表执行失败了
 7 });
 8
 9 // 定义一个所依赖的 task 必须在这个 task 执行之前完成
10 gulp.task(‘two‘, [‘one‘], function() {
11     // ‘one‘ 完成后
12 });
13
14 gulp.task(‘default‘, [‘one‘, ‘two‘]);

gulp.watch(glob[, opts, cb])

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

1 //每次变动需要执行的 callback
2 gulp.watch(‘js/**/*.js‘, function(event) {
3   console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
4 });
时间: 2024-05-21 15:01:53

gulp基本语法的相关文章

Gulp安装及配合组件构建前端开发一体化

所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev # 局部安装 全局安装 1. 将安装包放在

gulp相关知识(2)

将之前的东西的理论部分整理了一下—— gulp 前端构建工具 它可以帮助我们完成一些自动化操作 它需要一些插件的支持 var gulp = require('gulp'); --> gulp命令 require('yargs').argv; 它可以监听gulp后面添加的参数 关闭 gulp 服务器: 执行 ctrl + c var less = require('gulp-less'); -->> less预处理器,目的就是把 .less文件转换成普通css文件 var header =

gulp系列文章一 fis vs grunt vs gulp,为什么要是gulp呢?

gulp是最近火起来的前端构建工具,大有赶超grunt之势,它和grunt这种构建工具比较像. grunt是写一个Gruntfile.js来写配置代码,gulp则是写一个gulpfile.js来写配置代码.然后通过命令grunt或者gulp来构建项目, 前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了. fis是用起来最简单的.都不用自己写什么配置文件.直接执行几个命令就能把所有东西给你嗖嗖嗖的弄好.难易程度一颗星. grunt相对来说是最复杂

Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)

这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angularJs2 beta版的,网上的资源有两种,一个是文件全压缩版的.min.js版的另一个就是一大堆乱七八糟的js文件,主要是ng2已经完全采用TypeScript,加之对es6的支持,所以需要引入一大堆兼容,编译文件 这边刚好特别手欠想学学gulp,于是开搞配置gulp环境,压缩所有的js文件成一个mi

Gulp安装及配合组件构建前端开发一体化(转)

Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev

gulp 使用介绍

gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要用于代码打包.目前主流的前端打包工具,grunt,gulp,webpack.grunt现在似乎慢慢被gulp取代,而我使用gulp也是冲着大家说的配置简单去的,至于通道流,运行文件什么的其实还是次要的:webpack现在很火,听说功能强大,没有用过. npm install gulp -g 注意需要

一步步创建基于React+EF6+WebApi2+Gulp的项目(前端篇)

一.关于Gulp Q1: 为什么需要Gulp或Grunt? 1. 缓存问题,javascript和css都属于静态文件,因此当我们修改javascript文件时候,经常会遇到local没问题,但是部署到server时候,问题依旧存在,通常这就是缓存导致 2. Javascript和css等项目依赖关系 依赖的产生,会导致请求时间的延长,影响性能.其次,越来越多的js和cs文件,需要请求多次,而浏览器的请求每次请求是有限的,因此我们需要压缩js和cs文件,来减少请求次数,提高性能. Q2: 为什么

前端自动化构建工具gulp记录

什么是gulp 答:Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新.. 为什么要用gulp? 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合并,减少http请求:文件压缩,减少文件体积,加快下载速度: 3.效率提升:

构建工具-Gulp 相关知识

layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- Gulp- 简介 Automate and enhance your workflow | 用自动化构建工具增强你的工作流程 Gulp 是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完