gulpJs前端构建工具的了解

因为一次去除亢余css接触了gulp的插件gulp-uncss，于是就想了解一下这个gulp到底是何方神圣

其实gulp的安装上一篇已经讲解过了，接下来我们来讲解他的api

其实掌握四个就够了

gulp.src()

gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，这个我们暂时不用去深入理解，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了。其语法为：

gulp.src(globs[, options])
例如：gulp.src('css/*.css') //可以使用正则也可以使用具体文件名

gulp.dest()

gulp.dest()方法是用来写文件的，其语法为：

gulp.dest(path[,options])
例如： .pipe(gulp.dest('dist'));  //输出目录

gulp.task()

gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：

gulp.task(name[, deps], fn)
例如：gulp.task('uncss', function() {
    console.log("hello")
});

gulp.watch()

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为

gulp.watch(glob[, opts], tasks)

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

以上都是最简单的gulp  API   需要复杂更高功能的还需要去查资料

 

接下来介绍几哥他的插件