gulp介绍
1. 网站：
2. 特点
易于使用：通过代码优于配置的策略， Gulp 让简单的任务简单，复杂的任务可管理。
构建快速 ：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。 插件高质 ： Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习 ：通过最少的 API ，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
1.gulp安装
前提先安装 nodejs 环境然后在进行如下安装
npm install gulp -g 全局安装npm install gulp --save-dev 安装依赖
如果安装不成功，借助cnpm
2. 初始化工程
1>、mkdir 文件夹名称
2>cd 文件夹名称
3> 创建 package.json 文件
手动创建或者命令创建
npm init 输入相关信息4> 然后发现没有 gulp
这个时候就需要输入
npm install gulp --save-dev 然后出现一个 node_modules/ 文件夹(2) 有配置文件的话
直接输入 npm install 就可以了3. 创建任务
通过 gulpfile.js 去创建任务
在根目录下创建一个 gulpfile.js 的文件 在文件中写入以下内容1 var gulp = require('gulp');2 gulp.task('hello',function(){3 // 第一个参数是任务名称，第二个参数是任务功能4 console.log('hello world!');5 }) 写完之后呢
在命令行中输入
gulp hello 命令执行输出 hello world ！其他命令我们会在后面介绍
这里呢我们先介绍一个默认的任务1 gulp.task('default',function(){}) 他也有回调函数，但是呢，但是回调函数，我们可以通过数组来定义2 gulp.task('default',['hello',....]); 数组里放入我们定义的字符串 然后命令行中输入gulp 就可以执行了//例如上面输 gulp default
4.gulp 基础
gulp.src().pipe(gulp.dest())
gulp.src() 方法可以帮助我们找出将要处理的文件，然后 pipe() 去处理这些找到的文件。 pipe() 可以理解为管道，每个管道就可以指定它的功能，最后我们再使用 gulp.dest() 方法把处理好的文件放到指定的地方。1>使用 gulp 来实现文件的 copy
首先在我们工程目录下新建一个测试使用的 index.html,然后写入相应的内容在我们个 gulpfile.js 文件中输入以下内容1 var gulp =require('gulp');2 gulp.task('copy-index',function(){3 //gulp.src() 找到我们的 index.html 然后使用 .pipe() 通道4 //gulp.dist() 发布拷贝5 return gulp.src('index.html').pipe(gulp.dist('dist'));6 }); 在我们的命令行中执行gulp copy-index 命令,然后去 dist 目录下验证
复制文件夹下所有jpg图片
1 var gulp = require('gulp');2 gulp.task('images',function(){3 return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'))4 }); *.jpg 所有格式为jpg的图片
下面再讲一下如何拷贝 images 下面文件夹以及文件夹下文件加入我们想要同时拷贝 jpg ， png 文件
gulp.task('images',function(){ return gulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images')) })
里面不要加空格，/**/* 当前文件夹下所有文件以及子文件下所有文件
两个文件夹同时拷贝到某一个文件夹下
1 gulp.task('data',function(){2 return gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));3 }) 排除文件拷贝
1 gulp.task('data',function(){2 return gulp.src(['xml/*.xml','json/*.json' ， '!/json/secret.json']).pipe(gulp.dest('dist/data'));3 }) !/json/secret.json 排除某个文件
多个任务执行，将上述几个一起执行
1 gulp.task('build',['copy-index','images','data'],function(){2 console.log(' 编译成功 ');3 }) 命令行 gulp build 查看效果
2>侦测文件变化
1 gulp.task('watch',function(){2 gulp.watch('index.html',['copy-index']);3 gulp.watch('images/**/*.{jpg,png}',['images']);4 gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'],['data']);5 }) 回到命令行执行 gulp watch
结束 ctrl + C
回到文件里面改变文件看下效果5、gulp 插件使用
访问网站
1>、gulp 编译 less
命令行安装依赖npm install gulp-less --save-dev
创建 less 文件，写入内容
在 gulpfile.js 文件中写入
1 var less = require('gulp-less');2 gulp.task('less',function(){3 return gulp.src('stylesheet/**/*.less')4 .pipe(less());5 .pipe(gulp.dest('dist/css'));6 }) 2>、gulp-connect 插件搭建本地服务
命令行安装
npm install gulp-connect --save-dev
在 gulpfile.js 文件中写入
1 var connect= require('gulp-connect');2 gulp.task('sever',function(){3 connect.server();4 }) 启动服务：
命令行执行 gulp sever
修改文件后页面自动刷新
1 gulp.task('sever',function(){2 //connect.server();3 //sever() 方法介绍4 // 配置文档根目录5 connect.server({6 root ： 'dist' ，7 livereload:true8 });9 }) 然后在我们 copy 任务中添加
1 gulp.task('copy',function(){2 return gulp.src('index.html').pipe(gulp.dest(''))3 .pipe(connect.reload());4 }) 然后在 watch 中添加
1 gulp.task('watch',function(){2 gulp.watch('index.html',['copy']);3 }) 然后创建一个
1 gulp.task('default',['server','watch']); 最后执行 gulp default 命令
验证修改文件看下浏览器中是否会自动刷新
3>、合并文件插件 gulp-concat
命令行安装 npm install gulp-concat --save-dev
在 gulpfile.js
1 var concat = require('gulp-concat');2 gulp.task('scripts',function(){3 return gulp.src(['javascripts/avalon.js','javascripts/index.js'])4 .pipe(concat('vendor.js'))5 .pipe(gulp.dest('dist/js'));6 }) 4>、将合并 js 文件进行压缩 gulp-uglify
命令行安装 npm install gulp-uglify --save-dev
1 var uglify = require('gulp-uglify');2 gulp.task('scripts',function(){3 return gulp.src(['javascripts/avalon.js','javascripts/index.js'])4 .pipe(concat('vendor.js'))5 .pipe(uglify())//6 .pipe(gulp.dest('dist/js'));7 }) 为了保留前后压缩两个文件
怎么做呢安装 gulp-rename 插件命令行安装 npm install gulp-rename --save-dev
1 var rename = require('gulp-rename');2 gulp.task('scripts',function(){3 return gulp.src(['javascripts/avalon.js','javascripts/index.js'])4 .pipe(concat('vendor.js'))5 .pipe(gulp.dest('dist/js'))6 .pipe(uglify())7 .pipe(rename('vendor.min.js'))8 .pipe(gulp.dest('dist/js'));9 }) 命令行执行 gulp scripts
验证是否生成两个文件5>、如何压缩 css
命令行安装 npm install gulp-minify-css --save-dev
1 var minifyCss = require('gulp-minify-css');2 gulp.task('less',function(){3 return gulp.src('stylesheet/**/*.less')4 .pipe(less());5 .pipe(minifyCss())6 .pipe(uglify())7 .pipe(gulp.dest('dist/css'));8 }) 6>、对图片进行压缩
安装插件 npm install gulp-imagemin --save-dev
1 var imagemin = require('gulp-imagemin');2 gulp.task('images',function(){3 return gulp.src('images/**/*')4 .pipe(imagemin())5 .pipe(gulp.dest('dist/images'))6 }) 执行命令 gulp images
6>、监听文件，浏览器自动刷新
安装插件 npm install gulp-livereload --save-dev
1 var less = require("gulp-less"); //less编译 2 var livereload = require('gulp-livereload'); //自动刷新 3 4 gulp.task('compile-less', function() { 5 gulp.src('style/less/*.less') //less编译 6 .pipe(less()) 7 .pipe(gulp.dest('style/css')) 8 .pipe(livereload()); 9 10 });11 gulp.task('watch', function() {12 livereload.listen(); //要在这里调用listen()方法13 gulp.watch('style/less/*.less', ['compile-less']); //监听目录下的文件，若文件发生变化，则调用less任务。14 gulp.src('index.html')15 .pipe(livereload());16 });17 //当代码变化时，它可以帮助我们自动刷新页面，该插件最好配合谷歌浏览器，且要安装livereload chrome extension扩展插件，否则无效。
gulp 功能呢暂时讲到这里还有很多内容可以参考官网进行学习
更详细gulp入门地址