gulp插件gulp-nunjucks-render的使用及gulp4的简单了解

之前写过一篇gulp的使用文章一篇迟到的gulp文章，代码合并压缩，less编译

最近有在用gulp，使用到一个gulp-nunjucks-render插件，感觉挺方便的

gulp-nunjucks-render 用来渲染Nunjucks templates

安装

npm install --save-dev gulp-nunjucks-render

使用

var env = process.env.NODE_ENV;
var ver = require('./package.json').version;

var normalUrl = {
  'dev': 'http://www.t.xxx.com',
  'test': 'http://www.t.xxx.com',
  'pre': 'http://www.pre.xxx.com',
  'prod': 'https://www.xxx.com',
};

return gulp.src([src + 'pages/**/*.html'])
  .pipe(nunjucksRender({
    path: [src], // String or Array
    manageEnv: manageEnvironment,
    data: {
      wwwUrl: normalUrl[env]
    }
  }))
  .pipe(gulp.dest(dist))
  .pipe(connect.reload());

1、使用data作为一个选项

 nunjucksRender({data: {
  css_path: 'http://company.com/css/'
}});

<link rel="stylesheet" href="{{ css_path }}test.css" />

编译之后

<link rel="stylesheet" href="http://company.com/css/test.css" />

2、manageEnv用来在编译之前添加filters、globals

var manageEnvironment = function(environment) {
  environment.addFilter('getAssetsUrl', function(filename) {
    const extname = filename.split('.').pop();
    const revJsonFile = path.join(path.dirname(__filename) + '/' + dist, 'public/' + extname + '/rev-manifest.json');
    if (fs.existsSync(revJsonFile)) {
      const hashMapJson = fs.readFileSync(revJsonFile);
      const hashMap = JSON.parse(hashMapJson);
      return `${host}/${extname}/${hashMap[filename]}`;
    }
  });

  environment.addFilter('getLibUrl', function(filename) {
    return `${host}/lib/${filename}`;
  })

  environment.addFilter('getVendorUrl', function(filename) {
    return `${host}/vendor/${filename}`;
  })

  environment.addFilter('getImgUrl', function(filename) {
    return `https://xxx.xxx.com/www/${imgVer}/pc/img/${filename}`;
  })

  var newenv = {
    'dev': 'development',
    'test':'testing',
    'pre':'pre',
    'prod':'production'
  }
  environment.addGlobal('env', newenv[env]);
  let baseUrl = 'https://www.xxxx.com';
  environment.addGlobal('baseUrl', baseUrl);
};

将manageEnvironment添加到manageEnv中

return gulp.src([src + 'pages/**/*.html'])
  .pipe(nunjucksRender({
    manageEnv: manageEnvironment,
  }));

这样在html文件中，通过{{ env }}这种形式拿到全局变量值

<script src="{{ 'nprogress.js' | getVendorUrl }}"></script>

// config
  define('config', function () {
    return {
      env: '{{ env }}',
      baseUrl: '{{ baseUrl }}'
    };
  });

另外，之前一直在用gulp3，今天对gulp4也简单了解了下

gulp4的任务执行

1、在gulp3中，task任务一般都是并行执行，如果需要同步执行需要另外使用插件 run-sequence

2、gulp4中，提供了gulp.series和gulp.parallel任务执行方式

gulp.series 用于串行（顺序）执行

gulp.parallel 用于并行执行

串行、并行执行

const task = gulp.series(clean, gulp.series(copy, js, css), gulp.parallel(html));

function watch(done) {
  gulp.watch('src/**/*.*', task);
  done();
}

/* m end */

var build = gulp.series(clean, task);

var dev = gulp.series(build, gulp.parallel(watch, serve));

exports.dev = dev;
exports.build = build;

执行命令

gulp dev
gulp build

参考阅读

走进gulp4的世界

Gulp 4: gulp.parallel gulp.series -- 全新的任务执行体系