zoukankan      html  css  js  c++  java
  • gulp

    1,全局安装gulp
    npm install gulp --global
     
    2,作为项目的开发依赖(devDependencies)安装:
    npm  install gulp --save-dev
     
    3,在项目根目录下创建一个名为gulpfile.js的文件:
    var gulp=require("gulp");
    gulp.task('执行gulp后面跟的名字',function(){
    //将你的默认的任务代码放在这
    })
     
    4,运行gulp
    gulp task函数中第一个参数的名字
     
     
     
    gulp API文档
    gulp.src(globs[,options])
    输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。将返回一个Vinyl files 的 stream。他可以被piped到别的插件中。
     
    gulp.src("需要操作的文件名")
    .pipe(jade())
    .pipe(minify())
    .pipe(gulp.dest("输出路径名"))
     
    globs  类型:String或Array
    所要读取的glob或者包含globs的数组
     
     
    options
    类型:object
     
    options.buffer
    类型: Boolean 默认值:true
    如果该项被设置为false,那么将会以stream方式返回file.contents,
    而不是文件buffer,在处理一些大文件的时候回很有用。注意:xx插件可能并不会
    实现对stream的支持。
     
    ....
    先不了解options里面的参数
     
     
    gulp.dest(path[,options])
    能被pipe进来,并且将会写文件。并且重新输出(emit)所有数据,因此你可以将它pipe到多个文件夹,如果某文件夹不存在,将会自动创建它
    gulp.src("./client/templates/*.jade")
        .pipe(...)
        .pipe(gulp.dest("输出路径名"))
     
     
     
    gulp.task(name[,deps],fn)
     
    gulp.task("somename",function(){
    //做一些事
    })
     
     
     
     
    name
    任务的名字,如果你需要在命名中运行你的某些任务,那么,请不要在命令中使用空格
     
    deps
    类型 Array
    一个包含任务列表的数组,这些任务会在你当前任务运行之前完成
     
    fn
    该函数定义任务所要执行的一些操作,通常来说,他会是这种形式 gulp.src().pipe(somePlugin())
     
     
     
     
     
    注意:
    默认的,task将以最大的并发数执行,也就是说,gulp会一次性运行所有的task并且不做任何等待,如果你想要创建一个序列化的task队列,并以特定的顺序执行,你需要做两件事:
    1,给出一个提示,来告知task什么时候执行完毕
    2,并且再给出一个提示,来告知一个task依赖另一个task的完成
     
     
     
     
     
     
    gulp.watch(glob[,opts],tasks)  或 gulp.watch(glob[,opts,cb])
    监视文件,并且可以在文件发生改动时候做一些事情,它总会返回一个EventEmitter来发射change事件
     
    gulp.watch(glob[,opts],tasks)
     
    glob
    类型 String  or  Array
    一个glob字符串,或者一个包含多个glob字符串的数组,用来指定具体监控哪些文件的变动
     
    opts
    类型:Object
     
    tasks
    类型 : Array
    需要在文件变动后执行的一个或者多个通过 gulp.task()创建的task的名字
     
     
    gulp.watch(glob[,opts,cb])
    cb(event)
    类型 : Function
    每次变动需要执行的callback
     
     
    callback会被传入一个名为event的对象,这个对象描述了所监控到的变动
    event.type     发生的变动的类型:added,changed或者deleted
    event.path      触发了该事件的文件的路径
     
     
     
    gulp插件
    压缩css   gulp-clean-css
    压缩JS    gulp-uglify
    压缩html  gulp-htmlmin
    压缩html时需要在minifyHtml中传参数{collapseWhitespace:true} 否则不会压缩空白
    重命名    gulp-rename   改变输出文件的文件名
    gulp-concat  文件合并
    gulp-sass    编译sass文件
    gulp-autoprefixer   自动处理浏览器前缀
    gulp-livereload   自动刷新
    fixer 固定器
     
     
     
     
    时代在变,你真是留不住自己
  • 相关阅读:
    JAVA的向上转型 和 向下转型
    Mobx 常用函数整理
    HTTP错误代码对应
    D3官网上的力导图
    用D3画简单的力导图
    nodejs 爬图片
    nodejs 爬热搜
    canvas 图片旋转 导出下载
    canvas 电子签名
    canvas 音乐跳动效果
  • 原文地址:https://www.cnblogs.com/mwfsm/p/7435598.html
Copyright © 2011-2022 走看看