• gulp入门


            gulp是基于Nodejs的自动化任务工具,类似java中的ant,结合相关插件可方便的完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。很好的利用了Nodejs的Stream和pipe,前一级输出直接为后一级的输入,操作非常方便。在前端主要有以下用途:

    gulp API:task、src、dest、watch
    gulp.task(name[, deps], fn)该方法用于定义一个gulp任务。 
    name 任务名称,不能包含空格 
    deps 该任务依赖的任务,依赖任务的执行顺序跟在deps中声明的顺序一致 
    fn 该任务调用的插件操作 

    gulp.src(globs[, options]) 方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件. 

    globs 需要处理的源文件匹配符路径 
    options 有3个属性buffer、read、base 

    globs 的文件匹配说明:  
    “src/a.js”:指定具体文件;

    “*”:匹配所有文件 例:src/*.js(包含src下的所有js文件);

    “**”:匹配0个或多个子文件夹 例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);

    “{}”:匹配多个属性 例:src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);

    “!”:排除文件 例:!src/a.js(不包含src下的a.js文件);

    options 的三个属性说明:  
    options.buffer : 类型: Boolean 默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用; 
    options.read : 类型: Boolean 默认:true 设置false,将不执行读取文件操作,返回null; 
    options.base : 类型: String 设置输出路径以某个路径的某个组成部分为基础向后拼接 

    gulp.dest(path[, options]) dest() 方法是指定处理完后文件输出的路径; 
    path 指定文件输出路径,或者定义函数返回文件输出路径亦可 
    options 有2个属性cwd、mode 

    gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) watch() 方法是用于监听文件变化,文件一修改就会执行指定的任务. 
    glob 需要处理的源文件匹配符路径 
    opts 具体参看 https://github.com/shama/gaze ;  
    tasks 需要执行的任务的名称数组 
    cb(event) 每个文件变化执行的回调函数 每当监视的文件发生变化时,就会调用 cb 函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息: 
    type :属性为变化的类型,可以是 added , changed , deleted 
    path :属性为发生变化的文件的路径 

    gulp的常用插件
    gulp-uglify 使用gulp-uglify压缩javascript文件,减小文件大小。
    gulp-rename 用来重命名文件流中的文件。用 gulp.dest() 方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用 gulp-rename 插件来改变文件流中的文件名。 
    gulp-minify-css 压缩css文件时并给引用url添加版本号避免缓存:
    gulp-htmlmin 使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。
    gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了.
    gulp-imagemin :压缩图片文件 
    gulp-jshint :侦测javascript代码中错误和潜在问题的工具 

    gulp的问题和缺陷
    问题很难定位,运行中间没有办法debug,console.log() 也不能很好的定位问题。
    task串行执行有问题。





  • 相关阅读:
    Mysql查漏补缺
    RabbitMQ学习笔记
    memcache学习笔记
    Redis问题整理
    JedisCluster获取key所在的节点
    JavaSE编程题
    IDEA快捷键 日常整理
    Idea 常用快捷键列表
    【C++】 构造函数为什么不能声明为虚函数,析构函数可以
    【算法笔记】买卖股票问题--DP/贪心算法
  • 原文地址:https://www.cnblogs.com/doit8791/p/5255409.html
Copyright © 2020-2023  润新知