gulp基本入门

gulp用于自动化和提高工作流，类似于grunt。gulp适用于nodejs平台。

 

gulp基础：

gulp两个主要的功能是读取想要处理的文件，把处理好的文件放到指定的地方
gulp.src()找出我们需要处理的文件
.pipe()用于处理这些被gulp.src()找出来的文件，他类似于管道，可以指定他的功能
.pipe(gulp.dest())将处理好的文件放到指定的地方,gulp.dest()的括号里面用于填写指定的位置
以上的几步合在一起就相当于一个复制的功能。将一个文件复制到另一个地方，源文件还是存在的。

eg：

//创建一个对象，这样gulp就拥有'gulp'提供的全部的属性和方法了
var gulp = require('gulp');
//gulp.task()用来创建一个任务
//copy-index是方法名，执行这段的代码的时候直接在命令行输入gulp copy-index即可
gulp.task('copy-index',function(){
    return gulp.src('index.html').pipe(gulp.dest('dist'));
});

 

gulp.task('images',function(){
    //images/*.jpg代表的是读取images文件夹下的所有jpg的文件
    //images/*.{png,jpg}  images下面的png和jpg图片
    //images/**/*   images下面的所有子目录
    return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));
});

gulp.task('data',function(){
    //['xml/*.xml,'json/*.json']  相当于用正则来匹配需要刷选的文件
    return gulp.src(['xml/*.xml', 'json/*.json']).pipe(gulp.dest('dist/data'));
});

 

排除文件：在前面加一个！即可例如：
['xml/*.xml', 'json/*.json', '!json/secret-*.json']

//创建依赖，将原本的子任务全部集合到一个主任务上面来。方便管理
gulp.task('build', ['copy-index', 'images', 'data'],function(){
    console.log('编译成功！');
});

https://app.yinxiang.com/Home.action#n=f8e69469-2fb0-4c21-9c60-083c059a57f2&ses=4&sh=2&sds=5&

//监视文件,当文件改变的时候，就会重新执行一次gulp，让修改的文件同步到复制到的位置

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提供很好的接口，但是他本身并不会做太多的事情，可以使用插件来扩展gulp的功能，编译less文件，合并，压缩等。
gulpjs.com/plugins/这个地址可以找到gulp可用的插件

 

常用的插件：

gulp-sass插件：（编译）

gulp-less插件：（编译）

gulp-connect插件：（创建本地服务器）

实时预览

gulp-concat插件：（合并文件）

gulp-uglify插件：（最小化js文件）
gulp-rename插件：（重命名文件）
gulp-minify-css插件：（最小化css文件）
gulp-imagemin插件：（最小化图像）

 

gulp-less插件：

var less = require('gulp-less');
gulp.task('less', function(){
    return gulp.src('stylesheets/**/*.less')
    .pipe(less())
    .pipe(gulp.dest('dest/css'));
});
 

gulp-connect插件：

var connect = require('gulp-connect');
gulp.task('server', function(){
    connect.server({
        root:'dist'
    });
});

gulp-connect插件：实时刷新

var connect = require('gulp-connect');
gulp.task('server', function(){
    connect.server({
        root:'dist',
        livereload:true         //开启实时刷新
    });
});
var gulp = require('gulp');
gulp.task('copy-index',function(){
    return gulp.src('index.html')
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload());    //重新reload文件，不需要刷新,有点类似于angular的双向绑定
});
gulp.task('default', ['server', 'watch']);     //让其默认执行