0.0.17 • Public • Published

    node-arjs-builder NPM version

    Builder for Angular + RequireJS projects

    Install with npm

    npm install arjs-builder


    Example of application structure. Also see node-projects-config documentations

    configs/       * local configs
     ├──admin/     * project
     ├──build/     * bulded projects
     ├──compiled/  * compiled files for local work
     ├──files/     * non included assets
     ├──main/      * project
     └──vendor/    * bower libraries
    var gulp = require('gulp');
    var arjs = require('arjs-builder')();
    gulp.task('test', arjs.test);
    gulp.task('default',; //compile and run local servers

    See demo project and big demo project



    Return instance of builder


    • localConfigsPath (String)
      Default: process.cwd() + '/configs'
      Folder for local configs.

    • karmaConfigPath (String)
      Default: process.cwd() + '/karma.conf.js' Path to Karma config

    • projectsPath (String)
      Default: process.cwd() + '/projects'
      Root folder for projects etc.

    • configsDir (String)
      Default: '*/_config'
      Glob-pattern for project config folders.

    • compiledDir (String)
      Default: 'compiled'
      Folder for compiled files for local work (styles, compiled vendors)

    • buildDir (String)
      Default: 'build'
      Folder for builded files

    • filesDir (String)
      Default: 'files'
      Assets (big images, fonts, video) which don't include into css-files. Better to store on a separate file server

    • vendorDir (String)
      Default: 'vendor' Vendor libraries (f.e. from bower)

    • testVendorDir (String)
      Default: 'vendor' Vendor libraries for tests (f.e. from bower)

    • moduleIndexFile (String) Default: 'index.js' Name of main module file (in which will be place templates and cache module dependencies)

    • maxListeners (Integer)
      Default: 100
      Set EventEmitter._maxListeners. Increase this value if there are EventEmitter errors of build of big project

    • browsers (Array of String)
      Default: ['chrome >= 35', 'ff >= 20', 'safari >= 7', 'ie >= 10', 'opera >= 12.10', 'android >= 4.4', 'ios >= 7', 'phantomjs >= 1.9']
      Defines supporting browsers. It use for old browsers checking and Autoprefixer

    Config API


        public: { ... },
        localhost: {
            webserver: { ... },
            manifest: { ... }
        build: {
            <every module params>
            manifest: { ... },
            modules: { ... },
            copy: { ... }
        vendor: { ... },


    Config for web. It will be export to window.project.config

        resources: {
            api: '//my-site/api/v1'


    Config for development on local device.


    Config for local webserver. May be array of configs for several servers. See node-webserver-lite documentation

        root: 'build',
        port: 7200,
        livereload: true


    List of resources which will be included to index.html as link or scripts tags. Paths for builded files add to manifest of builded projects. You can see current project manifest (with extra fields) in window.project. For local and builded project uses different manifests.

    //localhost manifest
        resources: {
            js: [{ //load require.js
                'src': 'vendor/requirejs/require.js'
                'data-main': 'main/requireconfig'
            css: [
                'compiled/main/vendor/angularStrap.css', //You can include vendor's styles to vendor module or use it directly: 'vendor/bootstrap/dist/css/bootstrap.css'
    //build manifest
        browsers: [ //you can override default versions of browsers
            "chrome >= 30",
            "ff >= 20",
            "safari >= 7",
            "ie >= 10",
            "opera >= 12.10",
            "android >= 4.4",
            "ios >= 7",
            "phantomjs >= 1.9"
        resources: {
            html: [
                'main/common/directives/header/template.html', //You can cache some templates, wich will be showed until js-framework loaded
            css: [
                /* <project styles are added automatically during build of the project> */
            /* js: [<project modules are added automatically during build of the project>] */


    Config for build project for final testing and production


    copy is a map where keys are Glob-pattern of source files relative to project directory, and values — destination paths or filenames relative to build directory.

    //default value of `copy`
        'favicon.ico': 'favicon.ico', //copy file to build directory
        'files/**': 'files/' //copy folder to build directory. (`files` is value of `filesDir` option)

    You can add custom files for copying in your config:

        'robots.txt': 'robots.txt'


    modules is a map with modules configs. Configs from modules merge on corresponding modules with <every module params>

        //every module params
        styles: [
            'main/import.styl' //add to each module including vendor and common
        inlineImgToCss: true,
        includeCss: true,
        uglifyJs: false,
        modules: {
            vendor: {
                //sortIndex: 0, //by default. Vendor loads and runs first
                includeCss: false
                scripts: [
                styles: [
                    'compiled/main/vendor/bootstrap.css' //add vendor style to vendor module
                uglifyJs: {
                    mangle: false //vendor will be uglified
            common: {
                sortIndex: 1, //Will be load and run second
                includeCss: false


    Has structure like modules. You can compile custom bundles of vendors

        angularStrap: { //module name to compiled directory
            rev: false, //don't uglify module name
            templateCacheModule: 'angularStrap',
            root: 'vendor/angular-strap/src',
            includeCss: false //it will create a separate file `angularStrap.css`
            annotate: {
                createMainModule: 'angularStrap',
                add: true,
                rename: [{
                    from: '$tooltip',
                    to: '$asTooltip'
            scripts: [
            templates: [
            styles: [ //you can include third-party styles to module

    module params

    • sortIndex (Integer)
      Defines order of modules loading. Use for build.modules array

    • baseUrl (String)
      Default: projectsPath (process.cwd() + '/projects')
      Base path for module files

    • root (String)
      Default: ''
      Path for module files relatively baseUrl

    • index (String)
      Default: false
      Use local index.html. Can be false, true, 'external'. If true or 'external' index.html copy to builded project folder.

      'external' is usually used for server redirects to project folder. Example for admin project:

      localhost config

      localhost: {
        webserver: {
          root: 'build'
          proxies: true
          port: 7201


      location /admin {
        include /etc/nginx/conf.d/auth.conf;
         try_files $uri @admin;
      location @admin {
        rewrite .* /admin/index.html break;
    • system (String)
      Default: 'angularAmd'
      Shorcuts for module wrapper. Can be:

      http: define("<%= name %>", [], function(){ var cache = window.lib.Cache("resource"); <%= contents %> });
      template: define("<%= name %>", [], function(){ var cache = window.lib.Cache("resource"); <%= contents %> });

      http: define("<%= name %>", ["app"], function(app){["$cacheFactory", function($cacheFactory) {var cache = $cacheFactory.get("$http"); <%= contents %> }]); });
      template: define("<%= name %>", ["app"], function(app){["$templateCache", function(cache) {<%= contents %> }]); });

      http: angular.module("<%= name %>").run(["$cacheFactory", function($cacheFactory) {var cache = $cacheFactory.get("$http"); <%= contents %> }]);
      template: angular.module("<%= name %>").run(["$templateCache", function(cache) {<%= contents %> }]);

      or custom wrappers object (<%= name %> is name of http or template cache module)

        http: '<wrapper for http cache>'
        template: '<wrapper for template cache>'

      See gulp-resource-cache config

    • templatePathPrefix (String)
      Default: ''
      Prefix for templates paths

    • httpPathPrefix (String)
      Default: ''
      Prefix for http url paths

    • templateCacheModule (String)
      Name of module with template cache

    • httpCacheModule (String)
      Name of module with http cache

    • wrapScript (String)
      Wrapper for each module script. F.e.:

      vendor: {
        xlsxAmd: {
          rev: false,
          root: 'vendor/js-xlsx/dist',
          wrapScript: 'define(["JSZip"], function(JSZip) {<%= contents %> window.XLSX = XLSX; return XLSX;})',
          scripts: ['xlsx.js']
    • scripts (Array of String)
      Array with paths of projects scripts (js)

    • templates (Array of String)
      Array with paths of projects templates

    • styles (Array of String)
      Array with paths of projects styles

    • httpCache (String)
      Array with urls which will be requested and cached to framework cache. It useful for small resources like languages or city lists

    • templateName (String)
      Default: 'template.html'
      Name of template related to the script

    • styleName (Array of String)
      Default: ['style.css', 'style.styl', 'style.less', 'style.scss', 'style.sass']
      Array names of styles related to the script

    • filesDir (String)
      Default: 'files'
      Name of files folder

    • rev (Boolean)
      Default: true
      Uglify filename to md5 of content

    • uglifyJs (Boolean/Object)
      Default: false
      UglifyJS config

    • minifyHtml (Boolean/Object)
      Default: true ({empty: true, spare: true, loose: true})
      minifyHtml config

    • minifyCss (Boolean/Object)
      Default: false
      minifyCss config

    • autoprefixer (Boolean/Object)
      Default: false
      autoprefixer config

    • includeCss (Boolean)
      Default: true
      Include CSS to JS

    • cssImport (Object)
      Default: {}
      Replace @import on the css content. See cssimport config

    • inlineImgToCss (Boolean/Object)
      Default: true (baseDir: <baseUrl>, maxImageSize: Infinity, exclude: [new RegExp('^[\"\']?((http|https|\/\/)|[.\/]*' + <filesDir> + ')')]) Inline resources to css in base64. See base64 config. Also you can use extra parameters:

      • excludeFilesStartWith (String or Array) - First path segment of url
      • excludeFilesByRegexp (String or Array) - Filtrating regexp
    • cssUrlPrefix (String) Prefix for resources urls in css

    • stylus (Object)
      Default: {'include-css': true}
      stylus config

    • sass (Object)
      Default: {}
      sass config

    • scss (Object)
      Default: {}
      scss config

    • less (Object)
      Default: {}
      less config

    • annotate (Object)
      Default: {}
      angular annotate config


    © Oleg Istomin 2015. Released under the MIT license


    npm i arjs-builder

    DownloadsWeekly Downloads






    Last publish


    • tamtakoe