Gulp介绍
* 中文主页: http://www.gulpjs.com.cn/
* gulp是与grunt功能类似的**前端项目构建**工具, 也是基于Nodejs的自动**任务运行器**
* 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
* gulp更高效(异步多任务), 更易于使用, 插件高质量
1、特点：
- 任务化
- 基于流(数据流)
- 执行任务是异步的：注意less和css任务的执行顺序
2、细节：
- gulp.src('src/js/**/*.js') 深度遍历
- 转换less
- 将转换完的文件放置在原文件css夹下
3、构建任务：
-半自动： gulp-livereload
需要手动刷新，不够智能
- 全自动：gulp-connect
自动刷新：原理是依赖connect内置的微型服务器
open：可自动帮助开启链接。
Gulp:
http://www.gulpjs.com.cn/(中文官网)
http://www.jianshu.com/p/cc1cb9a5650c(教程)
http://www.ydcss.com/archives/category/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7 (详细教程)
使用步骤：
1.安装 nodejs, 查看版本: node -v
2.创建一个简单的应用gulp_test
|- dist
|- src
|- js
|- css
|- less
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
{
"name": "gulp_test",
"version": "1.0.0"
} 3.安装gulp:
全局安装gulp
npm install gulp -g局部安装gulp
npm install gulp --save-dev4.配置编码: gulpfile.js
//引入gulp模块
var gulp = require('gulp');
//定义默认任务
gulp.task('taskName', function() {
// 将你的任务的任务代码放在这
});
gulp.task('default', ['taskName'])//异步执行5.构建命令:
gulp 6.使用gulp插件
* 相关插件:
* gulp-concat : 合并文件(js/css)
* gulp-uglify : 压缩js文件
* gulp-rename : 文件重命名
* gulp-less : 编译less
* gulp-clean-css : 压缩css
* gulp-livereload : 实时自动编译刷新
* 重要API
* gulp.src(filePath/pathArr) :
* 指向指定路径的所有文件, 返回文件流对象
* 用于读取文件
* gulp.dest(dirPath/pathArr)
* 指向指定的所有文件夹
* 用于向文件夹中输出文件
* gulp.task(name, [deps], fn)
* 定义一个任务
* gulp.watch()
* 监视文件的变化
7.处理js
src/js/test1.js
(function () {
function add(num1, num2) {
var num3 = 0;
num1 = num2 + num3;
return num1 + num2;
}
console.log(add(10, 30));
})();src/js/test2.js
(function () {
var arr = [2,3,4].map(function (item, index) {
return item+1;
});
console.log(arr);
})();8.下载插件:
npm install gulp-concat gulp-uglify gulp-rename --save-dev9.配置编码 gulpfile.js
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('js', function() {
return gulp.src('src/js/*.js') //操作的源文件,找目标原文件 将原文件的数据读取到gulp的内存中
.pipe(concat('built.js')) /合并js文件
.pipe(gulp.dest('dist/js')) //临时输出合并后的js文件
.pipe(rename({suffix: '.min'})) //重命名
.pipe(uglify()) //压缩js文件
.pipe(gulp.dest('dist/js'));//输出
});
gulp.task('default', ['js']);10.页面引入js浏览测试 : index.html
<script type="text/javascript" src="dist/js/built.min.js"></script>11.打包测试: gulp
gulp12.处理css文件
src/css/test1.css
#div1 {
width: 100px;
height: 100px;
background: green;
}src/css/test2.css
#div2 {
width: 200px;
height: 200px;
background: blue;
}src/less/test3.less
@base: yellow;
.index1 { color: @base; }
.index2 { color: green; }13.下载插件:
npm install gulp-less gulp-clean-css --save-dev14.配置编码gulpfile.js
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
//注册编译less的任务
gulp.task('less', function () {
return gulp.src('src/less/*.less')
.pipe(less())//将less文件转换为css文件
.pipe(gulp.dest('src/css/'))
});
//css处理任务, 指定依赖的任务less任务执行完，在执行cssTask任务
gulp.task('css',['less'], function () {
return gulp.src('src/css/*.css')
.pipe(concat('built.css'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('default', ['minifyjs','less', 'css']);
15.页面引入css浏览测试 : index.html
<link rel="stylesheet" href="dist/css/built.min.css">
<div id="div1" class="index1">div1111111</div>
<div id="div2" class="index2">div2222222</div>16.打包测试: gulp
gulp
17.处理html
下载：
npm install gulp-htmlmin --save-dev18.配置编码
var htmlmin = require('gulp-htmlmin');
//压缩html任务
gulp.task('htmlMinify', function() {
return gulp.src('index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minifyjs', 'less','css', 'htmlMinify']);19.修改页面引入
<link rel="stylesheet" href="css/built.min.css">
<script type="text/javascript" src="js/built.min.js"></script>20
打包测试: gulp
21.自动编译
下载插件
npm install gulp-livereload --save-dev22. 配置编码:
var livereload = require('gulp-livereload');
gulp.task('htmlMinify', function() {
return gulp.src('index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
.pipe(livereload());//实时更新
});
//所有的任务，所有的pipe，都加.pipe(livereload());实时更新
//注册监视的任务--->半自动
gulp.task('watch',['default'], function () {
//开启监视
livereload.listen();
//确认监视的目标并且绑定相应的任务
gulp.watch('src/js/*.js', ['js']);
gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
});23，注册一个全自动的任务，热加载(实时加载)
1、下载插件：gulp-connect
npm install gulp-connect --save-dev
npm install open --save-dev2、 注册 热加载的任务 server，注意依赖build任务
3、注册热加载的任务
var connect = require('gulp-connect');
var open = require('open');
//注册一个全自动的任务
gulp.task('server',['default'], function () {
//配置服务器选项
connect.server({
root : 'dist/',//监视的源目标文件路径
livereload : true,//是否实时刷新
port : 5000//开启端口号
});
// 自动开启链接
open('http://localhost:5000/');
//确认监视的目标并且绑定相应的任务
gulp.watch('src/js/*.js', ['js']);
gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
})24.打包加载gulp插件
* 打包加载gulp插件 * 前提：将插件下载好。 * 下载打包插件： gulp-load-plugins
npm install gulp-load-plugins --save-dev引入：
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();//引入的是函数，调用以后返回的是对象
//其他的插件不用再引入了，所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
// var concat = require('gulp-concat');
// var rename = require('gulp-rename');
// var uglify = require('gulp-uglify');
// var less = require('gulp-less');
// var cssClean = require('gulp-clean-css');
// var htmlMin = require('gulp-htmlmin');
// var livereload = require('gulp-livereload');
// var connect = require('gulp-connect');
var open = require('open');
//注册合并压缩js的任务
gulp.task('js', function () {
//你的任务执行 具体过程
return gulp.src('src/js/*.js')//找目标原文件 将原文件的数据读取到gulp的内存中
.pipe($.concat('build.js'))//合并js文件
.pipe(gulp.dest('dist/js/'))//临时输出
.pipe($.uglify())//压缩js文件
.pipe($.rename({suffix:'.min'}))//重命名
.pipe(gulp.dest('dist/js/'))//输出
//.pipe(livereload())//实时加载
.pipe($.connect.reload())
});
//注册编译less的任务
gulp.task('less', function () {
return gulp.src('src/less/*.less')
.pipe($.less())//将less文件转换为css文件
.pipe(gulp.dest('src/css/'))
//.pipe(livereload())//实时加载
.pipe($.connect.reload())
});
//注册合并压缩css的任务
gulp.task('css',['less'] ,function () {
return gulp.src('src/css/*.css')
.pipe($.concat('build.css'))
.pipe(gulp.dest('dist/css/'))
.pipe($.rename({suffix:'.min'}))
.pipe($.cleanCss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css/'))
//.pipe(livereload())//实时加载
.pipe($.connect.reload())
});
//注册压缩html的任务
gulp.task('html', function () {
return gulp.src('index.html')
.pipe($.htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist/'))
//.pipe(livereload())//实时加载
.pipe($.connect.reload())
});
//注册监视的任务--->半自动
gulp.task('watch',['default'], function () {
//开启监视
livereload.listen();
//确认监视的目标并且绑定相应的任务
gulp.watch('src/js/*.js', ['js']);
gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
});
//注册一个全自动的任务
gulp.task('server',['default'], function () {
//配置服务器选项
$.connect.server({
root : 'dist/',//监视的源目标文件路径
livereload : true,//是否实时刷新
port : 5000//开启端口号
});
open('http://localhost:5000/');
//确认监视的目标并且绑定相应的任务
gulp.watch('src/js/*.js', ['js']);
gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
})
//注册一个默认任务
gulp.task('default', ['js', 'less', 'css','html']);
其他的插件不用再引入了
所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
若插件名字中有‘-’，则字母大写，比如‘gulp-clean-css’插件 $.cleanCss({compatibility: 'ie8'})
扫一扫
4175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
