zoukankan      html  css  js  c++  java
  • gulp的入门浅析

    介绍gulp

          gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

    安装gulp

      因为gulp是基于Nodejs的,故而安装gulp,使用的也是npm。

      命令窗口输入:npm install gulp,若要全局 npm install  -g gulp,若要存到package.json  npm install --save-dev gulp

       

    gulpfile.js

      gulpfile.js是它的配置文件。

    其中结果如下:

        ---------》    

    运行gulp

      命令窗口执行gulp 任务名称;

      编译watch:命令窗口执行gulp watch

      

      当执行gulp将会调用default任务里的所有任务,例如   gulp.task('default', ['handleCSS', 'watch']);

       

    介绍gulp的api

    使用gulp时,只要知道4个API就ok:gulp.task(),gulp.src(),gulp.dest(),gulp.watch(),下面也只是浅析,详细请看gulp中文网或者官方文档

    1、gulp.task(name[, deps], fn)

    gulpfile.js上基本是由无数个task组成的,task顾名思义是gulp用来定义任务的。

    其中三个参数分别:name-任务名称(必填)、deps-依赖的任务(可不填)、fn-回调函数

    gulp.task('handleCSS', ['testCss'], function () { //执行完testCss任务后再执行handleCSS任务
        gulp.src(['css/*.css'])
            .pipe(sass())
            .pipe(gulp.dest('./dist/css'));
    });

    2、gulp.src(globs[, options])

    globs:  需要处理的源文件匹配符路径,想更加了解可以去看下:node-globs,就能掌握gulp.src的精髓。我感觉就是将你想要的文件”吸”到”管道”中,然后pipe处理下去。 

    • foo.js指明特定某个文件
    • *.js匹配当前目录下的所有js文件,不指名扩展名则匹配所有类型
    • */*.js匹配所有第一层子文件夹的js文件,第二层请用*/*/.js
    • **/*.js匹配所有文件夹层次下的js文件, 包括当前目录

    因为有这么多种匹配格式,也要注意系统“最大读取文件数“,它会限制gulp的执行。

    gulp的过程其实就是从src到dest,gulp.src接到文件流时,经过中间gulp插件一系列的处理,File一直pipe下去, 直到dest写入文件,就是完整的src到dest的过程。

     

    3、gulp.dest(path[,options])

    用来操作文件的。

    其中三个参数分别:path-写入文件的路径(必填)、options-参数对象(可不填)

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

    这个是用来监听文件变化的。

    三个参数:glob跟src中的一样(文件匹配模式、必填),opts(可不填,很少用),tasks是监听后的回调函数

    例如这个,监听html变化后,打印了这句话出来。

    也有这样写:gulp.watch(['src/css/*.scss'], ['handleCSS']);   其效果都一样。

     

  • 相关阅读:
    我们的CPU遭到攻击[LOJ558]
    历史[ZJOI2018]
    字符串[LOJ6517]
    奥运公交[LOJ3255]
    BLO-Blockade[POI2008]
    压力[BJOI2013]
    Earthquake[USACO01OPEN]
    暴力写挂[CTSC2018]
    极简教程:数据结构与算法(二)
    DllRegisterServer的调用失败的问题解决方法
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/5667712.html
Copyright © 2011-2022 走看看