前端自动化gulp

新建一个gulpfile.js文件。

引入文件这个网上有很多的资料这里就不详细说了。

下面介绍一些他的方法

主要记住 gulp.task()  ,  gulp.src() , gulp.dest()  , gulp.watch()。。。。

这里先说一下gulp的原理和原因

gulp，使用的是Node.js中stream也就是流的概念，首先获取需要的stream，然后通过stream的pipe()的方法把流导入到你想要的地方，比如说gulp的插件中，经过插件处理后的流又可以继续导入到其他的插件中，当然也是可以把流写入到文件中，所以我们使用的gulp是以stream为媒介的，他不需要频繁的生成临时文件

gulp.src(globs ， options) 

  1 说明 src方法是指定需要处理的源文件的路径，gulp借鉴的是lunix系统的管道(pipe)的思想，前一级的输出，直接变成后以级的输入，gulp。src返回当前文件流至可用的插件

  globs 需要处理的源文件匹配符的路径，类型可以使一个string或者是一个路径。。

 其中通配符匹配实例 ：

  “src/log.js”  指定的具体路径

  "*"   匹配所有的文件   src/*.js  包含所有src下面的js文件

 "**"  匹配0个或者多个子文件夹  src/**/*.js   包含src的0个或者多个子文件夹下面的js文件

"{}"    匹配多个属性  src/{a,b}.js 包含a.js和b.js文件  src/*.{ipj,png,gif}  src下面的所有jpg/png/gif文件

“！”   排除文件 !src/a.js  不包含src下面的a.js文件

   var gulp = require("gulp"),

          less = require(gulp-less);

    gulp.task("longs" ,function () {

    gulp.src(["less/**/*.css"])  

      .pipe(less())

      .pipe(gulp.dest("./css")) 

})

    options  Object 三个属性 buffer read  base

   options.buffer  Boolean  默认 true   设置为false 将返回file.content的流并且不缓冲文件，处理大文件时候非常有用

    optins.read    Boolen    默认true   设置为 false  将不执行读取文件操作   返回null

   options.base   string   设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.src("long.js")

       .pipe(gulp.dest("build"))

gulp.src("long.js",{base : "longs"})

      .pipe(gulp.dest("build"))

2 gulp.dest(path,[,options])

  dest方法是指定的处理完成后文件输出的路径

 path 类型 sting / function  指定文件输出路径，或者定义函数返回文件输出路径

options     类型  Object  两个属性 swd，mode

  options.cwd 类型 string 默认的是process.cwd() 前脚本的工作目录的路径，当前文件输出路径为相对路径将会用到

  options.mode  类型 string 默认 0777  指定被创建文件夹的权限

3 gulp.task(name,[deps],fn)

       task 定义了一个gulp任务

  name  类型 string 指定任务的名称

  deps stringArray 该任务依赖的任务（被依赖的任务需要返回当前任务的事件流）

    gulp.task("long" , function (){

       return gulp.src(["less/lomg.less"])

                 .pipe(less())

                 .pipe(gulp.dest("./css"))  

 })

     gulp.task("zhanglogn" , ["long"] , function (){

            //执行完long的任务后再执行zhanglogn

           gulp.src(["css/*.css"])

                  .pipe()

                  .pipe(gulp.dest("./dist/*.css"))

            })

        fn  function  该任务调用的插件操作

4 gulp.watch (glob , [,opts] , tasks)  or gulp.task(glob  [,opts , cb] )

      说明 wantch 方法是用于监听文件变化 ，文件一修改就会执行指定的文件；

    glob  需要处理的源文件匹配符路径  类型 string or stringArray

    opts 类型 object 

    tasks   stringArray 需要执行的任务的名称数组

   cb（event）类型 function  每个文件变化执行的回调函数

 gulp.task("watch1" , function(){

        gulp.watch("less/**/*.less" , ["long"])  

    });

  gulp.task("watch2",function(){

      gulp.watch("js/**/*.js",function(){

         console.log("file"  + event.path + "was" + event.type)

      })   

 })

http://www.cnblogs.com/2050/p/4198792.html