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
注意需要在npm全局中安装gulp,否则命令窗口中找不到gulp快捷命令,记得检查环境变量的配置情况。
gulp 插件
gulp的使用离不开gulp插件的使用,下面是常用的几款。
npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev
del 和 gulp-clean
del是node.js的插件,两者的效果相似,都是用来清除文件。至于为什么使用 del,而不是 gulp-clean,我是看到网上一篇文章推荐的。
gulp-concat
gulp-concat用来做文件合并,可以将多个文件合并成一个文件,减少静态资源数量。
gulp-minify-css
gulp-minify-css是css的压缩工具。
gulp-uglify
gulp-uglify是js的压缩工具。官方文档上是这么写的 “Minify files with UglifyJS.”
gulp-replace
gulp-replace是一个文本修改插件,我们一般用来做文件内容的的修改,常用的是路径修改。
gulp-rev和gulp-rev-collector
gulp-rev和gulp-rev-collector,并没有用到,这里只做标示。这两个插件可以用来处理文件名,同时生成一个json文件保存修改前的文件名和修改后的文件名,并且自动处理文件中的修改,例如图片文件至于css文件。
gulp-connect
gulp-connect : 这个插件会启动一个 Http Server (with LiveReload)。
gulp的配置文件gulpfile.js
gulp依赖于配置文件gulpfile.js,在运行目录下需要手动创建gulpfile.js,gulp的任务执行代码会调用gulpfile.js。
gulp 语法
gulp的语法很简单,功能实现依赖于各种插件,所以学习上成本很低。gulp的语法其实就是是nodejs的语法。
- 声明依赖的插件
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace');
- 定义任务(task)
gulp.task('taskName', function() { }); //default是默认task,当命令行缺省调用时会执行default任务。
gulp.task('default', []);
- 命令行调用任务(task)
gulp taskName // 直接调用具体的task
gulp //调用默认的default,如果没用会报错
多个任务合并
gulp.task('default', ['task1', 'task2', 'task3', 'task4']);
文件拷贝语法
gulp.src('oldPath/images/*.*')
.pipe(gulp.dest(newPath+'/images'));文件合并且压缩语法
//css文件
gulp.src(['app/assets/styles/style.css',
'app/assets/styles/public.css',
'app/assets/styles/page.css',
'app/assets/styles/jquery-ui-1.10.3.css'])
.pipe(concat('style.css'))
.pipe(minifycss())
.pipe(gulp.dest(newPath));
//js文件
gulp.src([
'app/components/*/*.js'
])
.pipe(concat('components.js'))
.pipe(uglify())
.pipe(gulp.dest(newPath));文本修改
gulp.task('demo-replace', function(){
gulp.src(demoDir+'/index.html')
.pipe(replace('<link rel="stylesheet">', '')) //删除
.pipe(replace(/\.\.\/assets\//g, '')) //正则替换
.pipe(replace(/\.\.\/images/g, 'images'))
.pipe(gulp.dest(newPath));目录清理
gulp.task('clean', function(cb){
del(rootPath, cb);
});
gulp 实例
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace'); var root = 'dist';
var partnerDir = root + '/partners'; gulp.task('partners', function() {
gulp.src('app/assets/images/*.*')
.pipe(gulp.dest(partnerDir+'/images'));
gulp.src(['app/assets/styles/style.css',
'app/assets/styles/public.css',
'app/assets/styles/page.css',
'app/assets/styles/jquery-ui-1.10.3.css'])
.pipe(concat('style.css'))
.pipe(minifycss())
.pipe(gulp.dest(partnerDir)); gulp.src(['app/assets/js/jquery-1.11.1.min.js',
'app/assets/js/jquery-ui-1.10.3.js',
'app/assets/js/bootstrap.js',
'app/assets/js/echarts.js'])
.pipe(uglify())
.pipe(gulp.dest(partnerDir+'/js'));
gulp.src('app/partners/modules/*/*.html')
.pipe(gulp.dest(partnerDir+'/modules')); gulp.src([
'app/bower_components/angular/angular.js',
'app/bower_components/angular-ui-router/release/angular-ui-router.min.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-messages/angular-messages.min.js'
])
.pipe(uglify())
.pipe(gulp.dest(partnerDir+'/bower_components')); gulp.src([
'app/components/services/*.js',
'app/components/directives/*.js'
])
.pipe(concat('components.js'))
.pipe(uglify())
.pipe(gulp.dest(partnerDir)); gulp.src(['app/partners/modules/*/*.js',
.pipe(concat('modules.js'))
.pipe(uglify())
.pipe(gulp.dest(partnerDir)); gulp.src('app/partners/*.js')
.pipe(uglify())
.pipe(gulp.dest(partnerDir))
gulp.src('app/partners/*.html')
.pipe(gulp.dest(partnerDir))
}); gulp.task('partners-replace', function(){
gulp.src(partnerDir+'/index.html')
//styles
.pipe(replace('<link rel="stylesheet" href="../assets/styles/public.css">', ''))
.pipe(replace('<link rel="stylesheet" href="../assets/styles/jquery-ui-1.10.3.css">', ''))
.pipe(replace('<link rel="stylesheet" href="../assets/styles/style.css">', '<link rel="stylesheet" href="style.css">'))
//bower_components
.pipe(replace('<script src="../bower_components/angular/angular.js"></script>',
'<script src="bower_components/angular.js"></script>'))
.pipe(replace('<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>',
'<script src="bower_components/angular-ui-router.min.js"></script>'))
.pipe(replace('<script src="../bower_components/angular-resource/angular-resource.js"></script>',
'<script src="bower_components/angular-resource.js"></script>'))
.pipe(replace('<script src="../bower_components/angular-cookies/angular-cookies.js"></script>',
'<script src="bower_components/angular-cookies.js"></script>'))
.pipe(replace('<script src="../bower_components/angular-messages/angular-messages.min.js"></script>',
'<script src="bower_components/angular-messages.min.js"></script>'))
//components
.pipe(replace('...', '<script src="components.js"></script>'))
//modules
.pipe(replace('...', '<script src="modules.js"></script>')) .pipe(gulp.dest(partnerDir)); gulp.src(partnerDir+'/*.*')
.pipe(replace(/\.\.\/assets\//g, ''))
.pipe(replace(/\.\.\/images/g, 'images'))
.pipe(gulp.dest(partnerDir)); gulp.src(partnerDir+'/modules/*/*.html', { base: 'modules' })
.pipe(replace(/\.\.\/assets\//g, ''))
.pipe(replace(/\.\.\/images/g, 'images'))
.pipe(gulp.dest('modules')); }) gulp.task('clean', function(cb){
del(root, cb);
}); gulp.task('replace',[ 'partners-replace']); gulp.task('default', [ 'partners']);
gulp的缺点
- 问题很难定位,运行中间没有办法debug,console.log() 也不能很好的定位问题。
- task串行执行有问题。
--20161125 补充------------------------
task 串行执行没有问题,当前一些细节没有注意到。每个 task 的 function 是都要有 return 的。没写 return 就会发现有时候会出错。
gulp 使用介绍的更多相关文章
- gulp基本介绍
一.gulp是什么 gulp就是用来机械化的完成重复性质(如less->css:js.css压缩:js混淆)的工作:gulp的机制就是将重复工作抽象成一个个的任务. 二.gulp使用 a.首先确 ...
- 自动化构建工具gulp简单介绍及使用
一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...
- gulp的介绍和手动安装
gulp, 前端自动化工具, 文件操作, 项目上线之前,将碎片文件合并,将ES6转成ES5,文件压缩,快速搭建服务器... gulp基于node环境 gulp就是node的一个非内置的小模块 gulp ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- gulp自己主动化任务脚本在HybridApp开发中的使用
眼下做前端开发的同学可能都熟悉grunt.fis之类的自己主动化构建工具.事实上在HybridApp开发中我们也能够使用这些工具来简化我们的工作.gulp就是一个比grunt,fis都先进的构建工具. ...
- 前端开发构建工具gulp的安装使用
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...
- 什么是gulp
gulp:入门简介 本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子. 什么是gulp gu ...
- windows平台下node,npm,gulp配置
参考文献:http://blog.csdn.net/yuanyuan214365/article/details/53749583 1.安装nodejs:nodejs nodejs安装路径随意 nod ...
- gulp:入门简介
本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子. 什么是gulp gulp的官方定义非常简洁: ...
随机推荐
- 建工发债sql
管理费用 为了得到科目名称,只好再从外面写一层 select a.*, (select b.subjname from bd_accsubj b where b.subjcode=a.scode an ...
- JAVA源码走读(一) HashMap与ArrayList
HashMap 一.HashMap基本概念: HashMap是基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒 ...
- c++虚函数调用及使用
#include <iostream> using namespace std; class A { public: ; }; class B: public A { public: ; ...
- UIScrollView 性能优化 - view转为Image
进入做地图闹钟app,图层关系是这样的: subwayView 上先绘制线路上各个元素:线条 ,站点名称-Label,站点位置(画圆圈表示)-View.shapeLayer UIBezierPath ...
- 在线开发工具helper
发现一个很有用的在线工具大全:http://tool.lu/ 同时,欢迎查看新开i云轩工作室: logo在线制作:http://www.uugai.com/
- 别人整理的DP大全(转)
动态规划 动态规划 容易: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ...
- gradle修改AndroidManifest.xml中的版本号
def VersionCode = "19" ant.replaceregexp(file:"../Assets/Plugins/Android/AndroidManif ...
- 03-c#入门(简易存款利息计算器v1.0)
本想把练习题做了的结果放上来,不过发现附录是有答案的,就算了吧,自己做了没问题就行了哈.之前提到过,要是有朋友有想法,需要做小工具我可以帮忙实现,不过貌似大家都很忙.SO,自己学完第4章后,决定做一个 ...
- ios 逆向收录
lldb 远程调试环境搭建:http://www.cnblogs.com/csutanyu/p/3653252.html
- iOS屏幕适配
## iOS屏幕适配 ### iOS屏幕适配发展史 1> iPhone4以前(没有iPad) * 不需要屏幕适配 2> iPad.iPhone5等设备出现 * 需要做横竖屏适配 * aut ...