grunt-ne

Grunt plugins including css-collect, spm-build and html-replace

npm install grunt-ne
12 downloads in the last month

grunt-ne

三个grunt插件的集合,打包前端资源

开始使用

安装

npm install grunt-ne

配置

添加下面一行到你的grunt.js

grunt.loadNpmTasks('grunt-ne');

然后为插件增加像下面这样的配置:

grunt.initConfig({
  ...
  pkg: {
    name: "jy",
    dist: "dist",
    base_uri: "http://static.mail.com/jy"
  },

  "css-collect": {
    main: {
      css_src: "./css",
      css_dst: "css",
      img_dst: "img",
      resource_map_file: "<%= pkg.dist %>/css-resource-map.json",
      files: "*.css"
    }
  },

  "spm-build": {
    root: "./js",
    resource_map_file: "<%= pkg.dist %>/js-resource-map.json",
    resource_map: {
      "bootstrap-dropdown": "ui.js"
    },
    options: {
      src: ".",
      dist: "../<%= pkg.dist %>/js"
    }
  },

  "html-replace": {
    main: {
      resource_map: ["<config:css-collect.main.resource_map_file>"],
      src: "./html",
      files: "*.html"
    }
  },
  ...
});

命令

css-collect

读取css_src中的css文件,分析css文件中的图片引用,把这些图片保持原有目录地移到img_dst,并把图片的md5值作为该图片文件名一部分,css文件中对该图片的引用路径也更改为图片处理后的路径;移动css文件到css_dst,对css文件压缩并做把css 的md5值作为该css文件名一部分,最后产出resource_map_file

spm-build

对使用 seajs 组织的模块使用 spm 打包,最后产出resource_map_file,上线后比如在freemarker模板里如下使用, 就能无缝地去加载打包后的资源文件。

seajs.config({
  ...
  map: <#include {path to resource map file}>
  ...
});

html-replace

根据resource_map,对模版文件的资源引用的路径替换,暂时只能识别css引用。

npm loves you