zoukankan      html  css  js  c++  java
  • gulpfile笔记

    gulp的使用流程:
    首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中

    1、gulp.task(name[,desp], fn);
        name: 执行的任务名
        desp: 任务执行需要依赖的任务
        PS:如果依赖的任务是异步操作的话,那么就不会等待依赖的任务执行完再去执行该任务,但是如果想要让异步的任务执行完再去执行该任务的话,可以通过以下三种方法:
            (1)通过一个毁掉函数,将回调函数放在异步执行操作里面,来通知gulp这个异步操作已经完成,这个回调函数就是任务函数的第一个参数
            

       gulp.task('one',function(callback){
                  //one是一个异步执行的任务
                  setTimeout(function(){
                    console.log('one is done');
                    callback();  //执行回调,表示这个异步任务已经完成
                  },5000);
                });
    
                //这时two任务会在one任务中的异步操作完成后再执行
                gulp.task('two',['one'],function(){
                  console.log('two is done');
                });
    
                gulp.task("default", ["two"], function() {
                    console.log("default is runing");
                });

            (2)定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况

     gulp.task('one',function(cb){
                  var stream = gulp.src('client/**/*.js')
                      .pipe(dosomething()) //dosomething()中有某些异步操作
                      .pipe(gulp.dest('build'));
                    return stream;
                });

            (3)返回一个promise对象

      //一个著名的异步处理的库 https://github.com/kriskowal/q
                var Q = require('q');
                gulp.task('one',function(cb){
                  var deferred = Q.defer();
                  // 做一些异步操作
                  setTimeout(function() {
                     deferred.resolve();
                  }, 5000);
                  return deferred.promise;
                });

    2、gulp.dest(path)
        path: 文件的写入位置,需要注意的是:只能用来指定要生成的文件目录,不能指定生成的文件名,生成的文件名是有导入到它的文件流决定的,如果想要改变文件名的话,使用gulp-rename

    3、gulp.src(globs)
        globs: 文件匹配模式,用来匹配文件路径(包括文件名),当有多种匹配时可以使用数组,但是使用数组的时候,如果要用排除模式(!单个匹配模式)的话,不能将要排除的放在数组的第一个。。。
       

    【
            * 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾
    
            ** 匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。
    
            ? 匹配文件路径中的一个字符(不会匹配路径分隔符)
    
            [...] 匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法
    
            !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的
    
            ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次,类似于js正则中的(pattern|pattern|pattern)?
    
            +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次,类似于js正则中的(pattern|pattern|pattern)+
    
            *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次,类似于js正则中的(pattern|pattern|pattern)*
    
            @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次,类似于js正则中的(pattern|pattern|pattern)
        】

    4、gulp.watch(glob, tasks)
        glob: 监视的文件匹配模式
        tasks: 文件变化后要执行的任务,为一个数组

    5、重命名
        比如:
        rename = require('gulp-rename'),
        pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js

    6、js文件压缩
        比如:
        uglify = require("gulp-uglify");
        .pipe(uglify())  //使用uglify进行压缩,更多配置请参考:

    7、css文件压缩
        比如:
         minifyCss = require("gulp-minify-css");
         .pipe(minifyCss()) //压缩

    8、html文件压缩
        比如:
         minifyHtml = require("gulp-minify-html");
         .pipe(minifyHtml()) //压缩

    9、图片压缩
        比如:
            var imagemin = require('gulp-imagemin');
            var pngquant = require('imagemin-pngquant'); //png图片压缩插件
            .pipe(imagemin({
                progressive: true,
                use: [pngquant()] //使用pngquant来压缩png图片
            }))

    10、文件合并
        比如:
        concat = require("gulp-concat");
         .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"

    11、less和sass的编译
        (1)sass
             sass = require("gulp-sass");
             .pipe(sass())
        (2)less
            less = require("gulp-less");
            .pipe(less())

    12、js代码检查
        比如:
        jshint = require("gulp-jshint");
         .pipe(jshint())
         .pipe(jshint.reporter('default'))
         // npm install --save-dev jshint-stylish
         .pipe(jshint.reporter('jshint-stylish'))

    14、自动刷新
        比如:
        browserSync = require("browser-sync").create(),
        reload = browserSync.reload; // 自动刷新
        gulp.task("browser-sync", function() {
            browserSync.init(resource.html, {
                server: {
                    baseDir: ["."], //or [,,,,,],
                    index: "build/index.html"
                }
            });
        });

    15、加载插件+重命名
    var plugins = require("gulp-load-plugins")({
        rename: {
            "gulp-make-css-url-version": "cssver",
            "gulp-content-includer": "includer",
            "gulp-html-extend": "htmlextend",
            "gulp-minify-css": "minicss",
            "gulp-rev-append": "revap"
        }
    });

    15、notify:消息提示
        .pipe(plugins.notify({ message: 'Styles task complete' }));

    16、rename:重命名
        .pipe(plugins.rename({suffix: '.min'}))

    17、changed: 编译或打包改变过的文件
        .pipe(plugins.changed(dist, {extension: ".js"}))

  • 相关阅读:
    深入理解JVM内幕:从基本结构到Java 7新特性
    通过Java反射做实体查询
    Hadoop教程(一)
    很不错的js特效
    java utf8字符 导出csv 文件的乱码问题。
    spring MVC使用Interceptor做用户登录判断
    Bootstrap--全局css样式之图片
    Bootstrap-全局css样式之按钮
    Bootstrap--全局css样式之表单
    Bootstarp--全局CSS样式之表格
  • 原文地址:https://www.cnblogs.com/qzccl/p/5712802.html
Copyright © 2011-2022 走看看