Gulp是什么?

Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子)。

Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如,有些插件可以用来执行JSHint编译CoffeeScript执行Mocha测试,甚至更新版本号

对比其他构建工具,比如Grunt,以及最近流行的Broccoli,我相信Gulp会更胜一筹(请看后面的”Why Gulp?”部分),同时我汇总了一个使用Javascript编写的构建工具清单,可供大家参考。

Gulp是一个可以在GitHub上找到的开源项目。

Gulp优势:

Gulp 相比于 Grunt 有很多优点,比较直观的:就是学习曲线比较平滑。比Grunt速度更快、配置更少。

1. 新建gulpfile.js

2. 安装插件到package.json生成依赖

熟悉一下Gulp:

gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数

gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)
gulp.dest(path[, options]) 处理完后文件生成路径
 
npm每安装一个模块,都会在node_modules里生成一个文件夹,可以访问文件夹查看README.md阅读和学习使用方式。
 
一个工程化前端项目demo的目录:
 
 
gulpfile.js
// 导入工具包('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']);
 
执行编译Gulp:
当执行gulp defaultgulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。
gulp testLess(任务名称) //编译less
 
右击gulpfile.js,查看当前运行的gulp任务
 
右击更新任务
 

gulp+Babel 搭建ES6环境

gulpfile.js文件写入:

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
babel = require('gulp-babel'); /* es6 */
gulp.task('es6', function() { return gulp.src('src/es6js/*.js')
.pipe(plumber())
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist/ztimages/'));
});

命令行执行:

gulp es6

 
 
 

gulp+Babel 搭建ES6环境的更多相关文章

  1. ES6 初体验 —— gulp+Babel 搭建ES6环境

    ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用E ...

  2. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  3. babel与ES6环境的搭建

    我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的.那么把ES6变成ES5不就行了吗? 那如何将ES6转换成ES5呢?我们来搭建它的转换环境吧~ 第一步:初始化项目,建立写注意事项的README ...

  4. 让浏览器兼容ES6语法(gulp+babel)

    使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...

  5. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

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

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

  7. 搭建ES6运行环境

    当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...

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

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

  9. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

随机推荐

  1. java多线程学习-ThreadLocal

    为了凑字,把oracle文档里介绍ThreadLocal抄过来 public class ThreadLocal<T> extends Object This class provides ...

  2. 对于for循环构成的九宫格里的button,如何满足“有默认选中的一个,并且只能选中一个”?

    需要构造一个全局变量self.priceBtn 在九宫格写法中 ) { self.priceBtn = btn; self.priceBtn.selected = YES; } 在button的点击方 ...

  3. JVM调优-Jva中基本垃圾回收算法

    从不同的的角度去划分垃圾回收算法. 按照基本回收策略分 引用计数(Reference Counting) 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数.垃圾回 ...

  4. ABAP 日期时间函数

    HR_JP_MONTH_BEGIN_END_DATE CALL FUNCTION 'HR_JP_MONTH_BEGIN_END_DATE' EXPORTING IV_DATE = ' IMPORTIN ...

  5. LeetCode(五)

    Minimum Depth of Binary Tree public class Solution { public int minDepth(TreeNode root) { if(root==n ...

  6. java容器简要概述

    java中集合框架的概述 java集合类主要用于保存对象的. 常用的集合对象: Colletion接口,Collection接口是集合中的顶层容器,表示的是一组对象,它的下面有两个子接口List接口和 ...

  7. Ubuntu遇到Please ensure that adb is correctly located at '...adb.exe' and can be executed 问题解决方法

    上次我们在SDK更新的到最新的Android L版本之后,我发现我的ADT和android指定的版本不对应,我的ADT是22版本的,android L需要23版本以上的,版本不对应的话就无法加载这个S ...

  8. 和为S的两个数字

    /*  * 和为S的两个数字  * 题目描述  * 输入一个递增排序的数组和一个数字S,在数组中查找两个数  * 使得他们的和正好是S,如果有多对数字的和等于S,输出两个  * 数的乘积最小的.  * ...

  9. [转载]tail No space left on device

    转载http://www.chenxie.org/?p=717 # tail -f ../logs/catalina.outtail: cannot watch `../logs/catalina.o ...

  10. Jade之Code

    Code jade支持内嵌js的代码到jade代码之中. Unbuffered Code 无缓冲代码以-符号开始,无任何额外输出(文本是什么即是什么). jade: - for (var x = 0; ...