美文网首页
gulp(4.x)的简单进阶学习(2)

gulp(4.x)的简单进阶学习(2)

作者: yunshengz | 来源:发表于2020-05-13 16:46 被阅读0次

    1. 关于任务(task)

    1.1任务(task)的公开(public)和私有(private)类型

    被export导出的是任务时公开任务,其他的均为私有任务。一个私有(private)类型的任务(task)在外观和行为上和其他任务(task)是一样的,只是取决于是否被export 导出

    function watcher() {
      watch(['src/*.scss'], styleTransform);
      watch(['src/*.js'], scriptTransform);
    }
    
    
    function transformTpl(done) {
      return src('views/**/*.html')
            .pipe(ejs())
            .pipe(dest('html'));
            done();
    }
    function transformCss(done) {
      return src('src/*.scss')
            .pipe(
              sass({
                outputStyle: 'compact'
              }).on('error', sass.logError)
            )
            .pipe(autoprefixer())
            .pipe(dest('html/dist'));
            done();
    }
    function transformJs(done) {
      return src('src/*.js')
            .pipe(babel(
              {
                presets: ["@babel/env"],
                plugins: []
              }
            ))
            .pipe(dest('html/dist'));
            done();
    }
    
    
    exports.default = watcher;
    
    exports.getDemo = series(transformCss, transformJs, transformTpl);
    

    由上面的代码可以分析出,watcher任务被export导出可以认为是公开任务,transformTpl和transformCss及transformJs没有被export导出是私有的任务。

    1.2组合任务

    所谓的组合任务就是把过个独立task通过series()和parallel()方法祝贺成为一个更大的一个操作。而且两个方法可以相互嵌套;
    两者的区别:
    series():传入改方法的任务按顺序执行。
    parallel():以最大并发量来运行任务。

    function transformTpl(done) {
      return src('views/**/*.html')
            .pipe(ejs())
            .pipe(dest('html'));
            done();
    }
    function transformCss(done) {
      return src('src/*.scss')
            .pipe(
              sass({
                outputStyle: 'compact'
              }).on('error', sass.logError)
            )
            .pipe(autoprefixer())
            .pipe(dest('html/dist'));
            done();
    }
    function transformJs(done) {
      return src('src/*.js')
            .pipe(babel(
              {
                presets: ["@babel/env"],
                plugins: []
              }
            ))
            .pipe(dest('html/dist'));
            done();
    }
    
    
    exports.getDemo = series(transformCss, transformJs, transformTpl);
    exports.getDemoOther = parallel(transformCss, transformJs, transformTpl);
    
    // 两个组合任务方法分别调用一个任务,则该任务会执行两次。
    

    2. 三个基本方法

    2.1 src()

    src()接收glob参数,并从文件系统中读取文件然后生成一个stream(node流),他将所有的匹配文件读取到内存中并通过stream进行处理。

    2.2 pipe()

    pipe()方法是stream所提供的;pipe()就是在一个可读流与可写流之间建立的一个通道。

    2.3 dest()

    dest()接受一个输出目录作为参数,并且其会产生一个stream,通常作为终止流。

    function scriptTransform() {
      return src('src/*.js')
            .pipe(babel(
              {
                presets: ["@babel/env"],
                plugins: []
              }
            ))
            .pipe(dest('dist'));
    }
    
    // src() 接受参数,从文件系统中读取src文件夹下的js文件,并生成stream。
    // dest() 接受输出目录做为参数,把处理过的文件流写入到当前文件下。
    // pipe(fn) pipe方法传入方法的是一个function,这个function作用无非是接受上一个流(stream)的结果,并返回一个处理后流的结果(返回值应该是一个stream对象)
    

    glob参数是什么:由普通字符或统配字符组成的字符串,用于匹配文件路径;

    例如:src()方法接受一个glob字符串作为参数,用于确定哪些文件需要操作,glob至少匹配到一个匹配项,否则src()将会报错。

    3. 文件监控

    watch()方法将globs于task进行关联。对匹配的glob文件进行监控,当这些文件被修改时就立即执行关联的task。

    function styleTransform() {
      return src('src/*.scss')
            .pipe(
              sass({
                outputStyle: 'compact'
              }).on('error', sass.logError)
            )
            .pipe(autoprefixer())
            .pipe(dest('dist'));
    }
    
    function scriptTransform() {
      return src('src/*.js')
            .pipe(babel(
              {
                presets: ["@babel/env"],
                plugins: []
              }
            ))
            .pipe(dest('dist'));
    }
    
    function watcher() {
      watch(['src/*.scss'], styleTransform);
      watch(['src/*.js'], scriptTransform);
    }
    

    相关文章

      网友评论

          本文标题:gulp(4.x)的简单进阶学习(2)

          本文链接:https://www.haomeiwen.com/subject/vjbnnhtx.html