Gulp的准备工作
1、准备工作
2、Gulp基础
3、Gulp插件
安装gulp
在node.js环境下输入指令
npm install gulp –g全局安装
npm install gulp –save-dev安装依赖
初始化工程
1、新建文件夹
mkdir文件夹名称
2 、cd命令进入文件夹下
3、创建package.json文件（手动创建或者命令行创建，npminit输入相关信息）
4、然后发现没有gulp这个时候就需要输入
npm install gulp –save-dev然后出现一个node_modules/文件夹
（2）有配置文件的话直接输入npm install就可以了
创建任务
在根目录下创建一个gulpfile.js的文件
在文件中写入以下内容
vargulp = require(‘gulp’);
gulp.task('hello',function(){ //第一个参数是任务名称，第二个参数是任务功能
console.log('hello world!'); })
写完之后呢
在命令行中输入gulp hello命令执行输出hello world！
其他命令我们会在后面介绍 这里呢我们先介绍一个默认的任务
gulp.task('default',function(){})他也有回调函数，但是呢，但是回调函数，我们可以通过数组来定义
gulp.task('default',['hello',....]);数组里放入我们定义的字符串然后命令行中输入gulp就可以执行了
Gulp基础
gulp.src()方法可以帮助我们找出将要处理的文件，然后pipe()去处理这些找到的文件。pipe()可以理解为管道，每个管道就可以指定它的功能，最后我们再使用gulp.dest()方法把处理好的文件放到指定的地方。
使用gulp来实现文件的copy
首先在我们工程目录下新建一个测试使用的index.html,然后写入相应的内容
在我们个gulpfile.js文件中输入以下内容
vargulp =require('gulp');
gulp.task('copy-index',function(){
//gulp.src()找到我们的index.html然后使用.pipe()通道
//gulp.dest()发布拷贝
returngulp.src('index.html').pipe(gulp.dest('dist'));
});
在我们的命令行中执行
gulp copy-index命令然后去dist目录下验证
拷贝图片文件从某一个工程下面拷贝图片
首先在本工程下放入一个图片目录文件
然后在gulpfile.js文件中写入
var gulp = require('gulp');
gulp.task('images',function(){
return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'))
});
命令行中执行gulp images
然后去dist文件夹下去验证
下面再讲一下如何拷贝images下面文件夹以及文件夹下文件
加入我们想要同时拷贝jpg，png文件
gulp.task('images',function(){
returngulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'))
})
里面不要加空格
如何拷贝文件夹呢
gulp.task('images',function(){
returngulp.src('images/**').pipe(gulp.dest('dist/images'))
})
/*代表拷贝文件夹以及文件夹下文件
当前文件夹下所有文件以及子文件下所有文件（全拷贝）
两个文件夹同时拷贝到某一个文件夹下
gulp.task('data',function(){
returngulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));
})
排除文件拷贝
gulp.task('data',function(){
returngulp.src([‘xml/*.xml’,‘json/*.json’,'!json/b.json']).pipe(gulp.dest('dist/data'));
})
!json/b.json排除某个文件
多个任务执行将上述几个一起执行
gulp.task('build',['copy-index','images','data'],function(){
console.log('编译成功');
})
命令行gulp build查看效果
侦测文件变化
gulp.task('watch',function(){
gulp.watch('index.html',['copy-index']);gulp.watch('images/**/*.{jpg,png}',['images']);gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'], ['data']);
})
回到命令行执行gulp watch
结束ctrl +Ｃ
回到文件里面改变文件看下效果
Gulp插件
访问网站http://gulpjs.com/plugins
gulp sass
gulp编译sass
命令行安装依赖
npm install gulp-sass --save-dev
创建sass文件，写入内容
在gulpfile.js文件中写入
var sass = require('gulp-sass');
gulp.task('sass',function(){
returngulp.src('stylesheet/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
})
gulp-connect插件搭建本地服务
命令行安装npm install
gulp-connect --save-dev
在gulpfile.js文件中写入
var connect= require('gulp-connect');
gulp.task('sever',function(){
connect.server({root:’dist’});
})
启动服务：命令行执行gulp sever
修改文件后页面自动刷新
gulp.task('sever',function(){
//connect.server();
//sever()方法介绍
//配置文档根目录
connect.server({
root：'dist'，
livereload:true
});
})
然后在我们copy任务中添加
gulp.task('copy',function(){
returngulp.src('index.html').pipe(gulp.dest('')) .pipe(connect.reload());
})
然后在watch中添加
gulp.task('watch',function(){
gulp.watch('index.html',['copy-index']);
})
然后创建一个
gulp.task('default',['sever','watch']);
最后执行gulp default命令
合并文件插件gulp-concat
命令行安装npm install
gulp-concat --save-dev
在gulpfile.js中
var concat = require('gulp-concat');
gulp.task('scripts',function(){
returngulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'));
})
将合并js文件进行压缩gulp-uglify
命令行安装npm install
gulp-uglify --save-dev
在gulpfile.js中
var uglify = require('gulp-uglify');
gulp.task('scripts',function(){
return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
})
为了保留前后压缩两个文件
怎么做呢
安装gulp-rename插件
命令行安装npm install
gulp-rename --save-dev
var rename = require('gulp-rename');
gulp.task('scripts',function(){
return
gulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(rename('vendor.min.js'))
.pipe(gulp.dest('dist/js'));
})
命令行执行gulp scripts验证是否生成两个文件
如何压缩css
命令行安装npm install
gulp-minify-css --save-dev
var minifyCss = require('gulp-minify-css');
gulp.task(‘sass',function(){
return gulp.src('stylesheet/**/*.sass')
.pipe(sass())
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
})
还可以对图片进行压缩
安装插件npm install gulp-imagemin
--save-dev
var imagemin = require('gulp-imagemin');
gulp.task('images',function(){
returngulp.src('images/**/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
})
执行命令gulp images