Gulp、Grunt构建工具
var gulp = require('gulp');
gulp.task('build', function () {
return gulp
.src('./sample.js')
.pipe(gulp.dest('./build'));
});
复制文件完成了,但是它没有压缩这个JS文件。要做到这一点,你必须使用一个Gulp插件。在这种情况下,你可以使用gulp-uglify,流行的UglifyJS压缩编绎插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('build', function () {
return gulp
.src('./sample.js')
.pipe(uglify())
.pipe(gulp.dest('./build'));
});
流使可以让您添加更多的插件,而只需要读取和写入磁盘一次。你也可以指定缓冲器中内容的大小。需要注意的是,如果你在压缩之前添加它,那么你得到的大小是unminified。
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var size = require('gulp-size');
gulp.task('build', function () {
return gulp
.src('./sample.js')
.pipe(uglify())
.pipe(size())
.pipe(gulp.dest('./build'));
});
Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。
gulp.task(name[, deps], fn)
:注册任务name
是任务名称;deps
是可选的数组,其中列出需要在本任务运行要执行的任务;fn
是任务体,这是 gulp.js 的核心了,需要花时间吃透它,详情见此。gulp.src(globs[, options])
:指明源文件路径- 用过 Grunt 的话,
globs
一定不会陌生,这里没什么变化;options
是可选的,具体请查看 gulp.js API gulp.dest(path)
:指明任务处理后的目标输出路径gulp.watch(glob[, options], tasks)/gulp.watch(glob[, options, cb])
:监视文件的变化并运行相应的任务。你没看错,watch
作为核心 API 出现在 gulp.js 里了,具体用法还是要多看文档,不过接下来我们会演示简单的例子。
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); // 语法检查
gulp.task('jshint', function () {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('dist'));
}); // 监视文件的变化
gulp.task('watch', function () {
gulp.watch('src/*.js', ['jshint', 'minify']);
}); // 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);
loadNpmTasks
就可以用了。它能使程序员使用JavaScript构建编绎工具时,几乎不费吹灰之力。你只需要寻找合适的插件,阅读它们的文档,然后安装和配置它。有基础足够大的插件库,几乎不需要开发自己的编译任务。1.使用 gulp.js,你的构建脚本是代码,而不是配置文件;
2.使用标准库(node.js standard library)来编写脚本;
3.插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;
4.任务都以最大的并发数来执行;
5.输入/输出(I/O)是基于“流式”的。
Gulp、Grunt构建工具的更多相关文章
- 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用
关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用 工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...
- Grunt构建工具能做哪些事?
Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
- gulp 前端构建工具入门
gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...
- gulp 前端构建工具使用
gulp 前端构建工具使用 1.新建一个web h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...
- Gulp前端构建工具
Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...
- 前端工程化系列[02]-Grunt构建工具的基本使用
本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
随机推荐
- FineCMS介绍
产品简介 FineCMS(简称免费版.企业版.公益版)是一款基于PHP+MySql+CI框架开发的高效简洁的中小型内容管理系统,面向多终端包括Pc端网页和移动端网页,支持自定义内容模型和会员模型, ...
- Sass的命令编译
[Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...
- QT分析之消息事件机制
原文地址:http://blog.163.com/net_worm/blog/static/127702419201001432028526/ 上回我们分析到QPushButton的初始化,知道了Wi ...
- WPF比较两个随机数大小写,利用MVVM思想实现
MVVM模式是把表现层和业务层完全分离,所以这里就使用MVVM制作一个极其简单的WPF的例子: 先看看最终图:
- 【nginx】nginx:利用负载均衡原理实现代码的热部署和灰度发布
事情起因很简单,代码的改动量很大.而且刚接手服务器,对原有的代码进行了一定程度的重构.虽然在测试服务器上做了较多的测试工作,但是直接将代码送入生产环境还是不放心,万一配置出问题服务直接崩溃怎么解?万一 ...
- 当提交的表单类型为multipart/form-data时 后台的dopost则不能使用 setCharset来进行解码了 需要单独对字段使用 原始的new String(req.name("ISO-8859-1"),"utf-8")形式解码了
当提交的表单类型为multipart/form-data时 后台的dopost则不能使用 setCharset来进行解码了 需要单独对字段使用 原始的new String(req.name(" ...
- 【bzoj1212】[HNOI2004]L语言 AC自动机
题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...
- python函数入门到高级
函数的定义: def test(x): "The function definitions" x+=1 return x def:定义函数的关键字 test:函数名 ():内可定义 ...
- BZOJ4011 HNOI2015落忆枫音(动态规划+拓扑排序)
DAG中每个点选一条入边就可以构成一棵有向树,所以如果没有环答案就是∏degreei. 考虑去掉含环的答案.可以看做把环缩点,剩下的点仍然可以任意选入边.于是去除的方案数即为∏degreei/∏deg ...
- tinyxml源码解析(中)
转载于:http://www.cnblogs.com/marchtea/archive/2012/11/20/2766756.html 前言: 之前趁着这段时间比较空闲,也因为听闻tinyxml大名, ...