nodejs之gulp自动化构建工具
来源:互联网 发布:网站美工培训班 编辑:程序博客网 时间:2024/06/04 20:05
Gulp是一个构建系统,它能通过自动执行常见任务,比如编译预处理CSS,压缩JavaScript和刷新浏览器,来改进网站开发的过程。 Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。 Gulp是一个可以在GitHub上找到的开源项目。 Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。
安装Gulp的过程十分简单。首先,需要在全局安装Gulp包:
npm install -g gulp
然后,在项目里面安装Gulp:
npm install --save-dev gulp
一、使用要点
1、Gulp是基于Node.js构建的,需要先安装好nodejs;
2、首先创建一个名为gulpfile.js的文件,这是定义Gulp任务的地方,它可以通过gulp命令来运行
二、常用方法
1、gulp.task()定义任务
1.1、gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时,需要传入任务名字和执行函数两个属性。
gulp.task('greet', function () { console.log('Hello world!');});
执行gulp greet
的结果就是在控制台上打印出“Hello world”.
1.2、一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务,我们可以通过指定一个任务数组而不是函数来完成。
gulp.task('build', ['css', 'js', 'imgs']);
这些任务不是同时进行的,所以你不能认为在js任务开始的时候css任务已经结束了,也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束,可以将函数和任务数组结合起来指定其依赖关系。例如,定义一个css任务,在执行前需要检查greet任务是否已经执行完毕,这样做就是可行的:
gulp.task('css', ['greet'], function () { // Deal with CSS here});
现在,当执行css任务时,Gulp会先 执行greet任务,然后在它结束后再调用你定义的函数。
2、gulp.src()
gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组,然后返回一个可以传递给插件的数据流。
return gulp.src('src/styles/main.scss')
3、引入组件
Gulp上有超过600种插件供你选择,你可以在插件页面或者npm上搜索gulpplugin来浏览插件列表。以下介绍常用插件:
3.1、引入gulp组建
var gulp = require('gulp');
3.2、gulp-uglify 文件压缩
var uglify = require('gulp-uglify');
3.3、gulp-less 编译less文件
var less = require('gulp-less');
3.4、gulp-jshint 拼接及缩小化JavaScript
var jshint = require('gulp-jshint');
4、gulp内置任务
4.1、‘default’任务, 默认会执行的任务
gulp.task('default',['css', 'imgs', 'html', 'tmod','js','font']);
4.2、gulp.watch() 监听事件
gulp.task('watchCss', function () { gulp.watch(['./gulp_js/css/**'], ['css']); /**监听gulp_js/css/下所以有的css文件**/});gulp.task('watch',['watchCss, 'watchImgs', 'watchHtml', 'watchTmod','watchJs']);/**添加监听任务组建*/
4.3、gulp.pipe();
使用pipe()来串流来源档案到某个插件。
var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat');gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) /**压缩代码**/ .pipe(concat('app.js')) /**将所有文件合并到一个叫app.js的文件中**/ .pipe(gulp.dest('build'));});
程序中JSHint插件执行了2次,这是因为第一次执行JSHint只是给文件对象附加了jshint属性,并没有输出。
4.4、gulp.dest()
设定目的路径。一个任务可以有多个目的地。案例:如上
4.5、gulp.dest()
设定目的路径。一个任务可以有多个目的地。案例:如上
0 0
- nodejs之gulp自动化构建工具
- gulp自动化构建工具
- gulp 自动化构建工具
- gulp 自动化构建工具
- gulp 前端自动化构建工具之构建less
- 前端自动化构建工具gulp
- gulp --- 前端自动化构建工具
- 配置自动化构建工具Gulp
- 自动化构建工具(gulp)
- gulp自动化构建工具----------初探
- 前端自动化构建工具--gulp
- 自动化工具之gulp
- gulp自动化构建工具之src, dist通配符*,**
- 基于Nodejs的自动化工具Gulp
- 基于Nodejs的自动化工具Gulp学习
- 编程语言NodeJSのGulp构建工具
- gulp前端自动化构建工具(三):gulp工具配置文件
- Gulp 自动化的项目构建工具
- android indication
- web.xml 中的listener、 filter、servlet 加载顺序及其详解
- 【Spark系列1】Windows下Spark单机版的安装
- gerrit mysql 常用操作
- easyui-tabs简单操作(随笔)
- nodejs之gulp自动化构建工具
- iOS 7及以上,改变UIStatusBar颜色
- C++实现逐行从文本文件读取数据
- htmlUnit使用简介(爬虫)
- Linux 下如何安装 JDK ,以 Ubuntu 为例。
- ehhe
- MySQL监控应该知道的九件事
- uitextfield 左侧图片
- Codeforces 118D Caesar's Legions