简单使用gulp四个API和常用模块

API

gulp一共四个API，执行任务；找到文件的路径；输出文件路径；监听

• gulp.task
• ulp.src
• gulp.dest
• gulp.watch

No1 ：gulp.task()

执行任务，task(‘任务名称’，[任务数组]，fn)

No2：gulp.src()

简单理解就是根据路径找到对应的文件，src(‘路径’[，可选参数])；可以被pipe的到其他插件中

No3：gulp.dest()

简单理解：输出到对应路径，能被pipe进来，dest(path[,options])

No4：gulp.watch()

简单理解：监听路劲文件的变化，执行相应的任务。gulp.watch(glob[, opts], tasks)

第三方模块的使用

• 在当前项目中添加该模块，该模块在gulp上的官网上可以找到
• 利用npm安装，输入命令：cnpm i -D【模块名称】
• 启动文件gulpfile.js中引入模块
  

  ---

No1：gulp-connect，

实时加载，实现无需刷新浏览器就能执行，一般结合监听一同使用

//基本使用
var gulp = require('gulp'),
var html = require('gulp-connect');
//copy-html任务已被监听
gulp.task('copy-html',()=>{
    return gulp.src('index.html')
        .pipe(gulp.dest('dist/'))
        .pipe(connect.reload());
})
gulp.task('server',()=>{
    connect.server({
        root: 'dist', //服务器根目录
        port: 8080, //端口号
        livereload: true//实时加载
    })
})

No2：gulp-htmlmin，

压缩html文件

//基本使用
var options = {
    collapseWhitespace:true//压缩html
}
gulp.src('index.html')
.pipe(htmlmin(options));
//参考http://www.ydcss.com/archives/20/comment-page-1#comments

No3：gulp-less，

实时编译less文件