Notoriously Psychedelic Modules
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    no-build-confpublic

    No build conf - build script

    Optimize your SPA programmatically.

    This project is greatly inspired by @mklabs works.

    Bulldozer

    Tested on Linux and Windows.

    HTML modification

    Add "data-build"="NAME_OF_THE_OPTIMIZED_ASSET" to every assets (css or js) you want to optimize. Here app.css and app.js.

    <link rel="stylesheet" href="css/style.css" data-build="app.css">
    
    <!-- scripts concatenated and minified via build script -->
    <script src="vendor/log.js" data-build="app.js"></script>
    <script src="vendor/underscore.js" data-build="app.js"></script>
    <script src="vendor/backbone.js" data-build="app.js"></script>
    <script src="vendor/handlebars.runtime-1.0.0.beta.6.js" data-build="app.js"></script>
    <script src="application.js" data-build="app.js"></script>
    <script src="lib/util.js" data-build="app.js"></script>
    <script src="lib/jquery.plugin.js" data-build="app.js"></script>
    <script src="lib/Backbone.plugin.js" data-build="app.js"></script>
    <script src="model/Todo.js" data-build="app.js"></script>
    <script src="template/templates.js" data-build="app.js"></script>
    <script src="view/todo/TodoView.js" data-build="app.js"></script>
    <script src="Router.js" data-build="app.js"></script>
    <!-- end scripts -->
    

    Result

    The result is an optimized directory:

    The previous HTML portion now look like this:

    <link rel="stylesheet" href="app.459703.css" data-build="app.css">
    <script src="app.6423e0.js" data-build="app.js"></script>
    

    CSS and JS are:

    • minified
    • merged
    • MD5'd

    Install this project

    You need nodejs installed.

    $ [sudo] npm install -g no-build-conf
    

    Use the build script as a CLI

    $ build-html example/in example/out
    info build rm -rf example/out/
    info build mkdir -p example/out/
    info build cp -r example/in/ example/out/
    info less parse example/out/css/normalize.less
    info less parse example/out/css/style.less
    info less parse example/out/css/todo.less
    info less parse example/out/css/utils.less
    info less write example/out/css/normalize.css
    info less write example/out/css/todo.css
    info less write example/out/css/utils.css
    info less write example/out/css/style.css
    info optipng optimize [ 'example/out/img/fr.png', 'example/out/img/information.png' ]
    info optipng /usr/bin/optipng -quiet example/out/img/fr.png example/out/img/information.png
    info jpegtran /usr/bin/jpegtran -copy none -optimize -outfile jpg-tmp.jpg example/out/img/cc-logo.jpg
    info jpegtran /usr/bin/jpegtran -copy none -optimize -outfile jpg-tmp.jpg example/out/img/mid-Creative_Commons_and_Commerce.ogg.jpg
    info concat Concat files in example/out/ [ 'vendor/log.js',
    info concat   'vendor/underscore.js',
    info concat   'vendor/backbone.js',
    info concat   'vendor/handlebars.runtime-1.0.0.beta.6.js',
    info concat   'application.js',
    info concat   'lib/util.js',
    info concat   'lib/jquery.plugin.js',
    info concat   'lib/Backbone.plugin.js',
    info concat   'model/Todo.js',
    info concat   'template/templates.js',
    info concat   'view/todo/TodoView.js',
    info concat   'Router.js' ]
    info js minify js
    info md5 compute md5
    info link write example/out/app-6423e0.js
    info css minify css example/out/css/style.css
    WARN css-b64-images [ [Error: Skip ../fonts/maven_pro_medium-webfont.eot Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/maven_pro_medium-webfont.eot?iefix Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/maven_pro_medium-webfont.woff Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/maven_pro_medium-webfont.ttf Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/maven_pro_medium-webfont.svg#webfontyQA0TEWF Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/callunasansregular-webfont.eot Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/callunasansregular-webfont.eot?#iefix Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/callunasansregular-webfont.woff Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/callunasansregular-webfont.ttf Exceed max size],
    WARN css-b64-images   [Error: Skip ../fonts/callunasansregular-webfont.svg#webfontW850hM1B Exceed max size],
    WARN css-b64-images   [Error: Skip http://pullrequest.org/img/background-pattern.gif External file.],
    WARN css-b64-images   [Error: Skip ../img/mixit-banner.png Exceed max size],
    WARN css-b64-images   { [Error: ENOENT, stat 'example/out/img/nlabal.png'] errno: 34, code: 'ENOENT', path: 'example/out/img/nlabal.png' } ]
    info md5 compute md5
    info link write example/out/css/app-503e33.css
    info build create file example/out/index.html
    info exclude remove 9 elements
    info build write file example/out/index.html
    info html-minifier optimize example/out/index.html
    info bin Build done in 1327 ms
    

    Use the build script as a library

    The no-build-conf build script works like connect middlewares.

    Here processors/middlewares less, optipng, jpegtran, script, link, css-b64-images, html-minifier are applied in order.

    var buildScript = require('no-build-conf');
    
    var processors = [
      require('no-build-conf/lib/processors/file/less'),
      require('no-build-conf/lib/processors/file/optipng'),
      require('no-build-conf/lib/processors/file/jpegtran'),
      require('no-build-conf/lib/processors/dom/script'),
      require('no-build-conf/lib/processors/dom/link'),
      require('no-build-conf/lib/processors/dom/css-b64-images'),
      require('no-build-conf/lib/processors/dom/exclude'),
      require('no-build-conf/lib/processors/file/html-minifier')
    ];
    
    build(target_dir, output_dir, processors, function(err, newFile){
        if(err) throw err;
        console.log('Build done ✔');
    });
    

    There is two sorts of processors:

    • file processors
    • dom processors

    File processors

    File processors take a list of files as argument.

    In the following example, the argument file will contain an array of every png images in the directory. For more information about the Glob pattern.

    module.exports = {
      glob: '**/*.png',
    
      process: function(files, next){
        //...
      }
    }
    

    Dom processors

    Dom processors take a list of DOM element as argument.

    $ is based on a jQuery-like implementation: Cheerio that works on Unix and Windows.

    module.exports = {
      el: 'link[data-build] href',
    
      process: function($, dir, links, next){
        if(!links) return next();
        var keys = Object.keys(links);
        if(!keys.length) return next();
        keys.forEach(function(key){
          var hrefs = links[key];
          //...
    
        }
      }
    }
    

    License

    Everything original is MIT, everything else honors whatever license it was written under.

    Keywords

    none

    install

    npm i no-build-conf

    Downloadslast 7 days

    9

    version

    0.5.3

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar
    • avatar