scalableminds / amd-optimize Goto Github PK

View Code? Open in Web Editor NEW

163.0 163.0 29.0 138 KB

An AMD (RequireJS) optimizer that's stream-friendly. Made for gulp.

License: MIT License

JavaScript 38.31% CoffeeScript 61.69%

amd-optimize's People

Contributors

Stargazers

Watchers

amd-optimize's Issues

Is it possible to do incremental builds?

Currently, if i hook this up with a watcher (say gulp.watch), the whole build process repeats for all the files. Is it possible to cache the read files and not process the files which are not changed (default behavior is webpack).

Something similar to what is suggested here - https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md

Simpler usage of Almond

You can simplify the documentation by adding the following:

var addSrc = require('gulp-add-src');
//...
            .pipe(amdOptimize('app', {...}))
            .pipe(addSrc.prepend(require.resolve('almond')))
            .pipe(addSrc.append('_start.js'))

where _start.js content is one-liner:

require('app'); // should match amdOptimize's first parameter

please add sugar syntax support for text plugin

I have a module like below:

define(['jquery',
'knockout',
'text!template1.html',
'text!template2.html',
'text!template3.html',
'text!template4.html',
'text!template5.html',
'text!template6.html'],function($, ko){

  var t1 = require('text!template1.html') 
})

after amd-optimize:

define(['jquery',
'knockout',
'template1.html',
'template2.html',
'template3.html',
'template4.html',
'template5.html',
'template6.html'],function($, ko){

  var t1 = require('text!template1.html') // error throwing
})

please add sugar syntax support for text plugin. Thanks!

Flag for tracing 'requires'

Maybe: 'none', 'root', 'all'

Log Time

Shim dependencies not supported

Add support for function(require, exports, module){} syntax

Currently code like

define(function(require, exports, module) {

    require('angular-ui-router');

    module.exports = require('angular').module('ui.router');

});

will be transformed into

define('contrib/angular-ui-router', [
    'angular-ui-router',
    'angular'
], function (require, exports, module) {
    require('angular-ui-router');
    module.exports = require('angular').module('ui.router');
});

Which obviously will cause errors.

I might be wrong, but it is supposed to be something like:

define('contrib/angular-ui-router', [
    'require', 'exports', 'module',
    'angular-ui-router',
    'angular'
], function (require, exports, module) {
    require('angular-ui-router');
    module.exports = require('angular').module('ui.router');
});

Use a parser instead of regex

Performance improvement

There is no problem if you use amdOptimize to build project. But I use this for styles compiling and livereload with gulp-watch and I watch a nasty delay.

I find style.less/style.sass/style.styl near every .js file (this allows not to download excess styles which are not relevant to the current project)

gulpWatch('project/**/*.styl', function() {
    return amdOptimize.src('/bootstrap', {configFile: configPath})
        .pipe(compileProjectStyles())
        .pipe(gulp.dest('build/project')));

amdOptimize scans scripts every time. Add, please, option cache: true which allows to use old scripts from cache

Prefix paths are not resolving properly

Using Bower & RequireJS, I have the following directory structure:

vendor/
    flight/
        component.js
        ....
scripts/
    common.js  (RequireJS config)
    app/
        core/
            component_ui/
                nav_drawer.js

In scripts/app/core/component_ui/nav_drawer.js, I have define(['flight/component'....
Just using RequireJS, this works because in my RequireJS config I have:

baseUrl: '/scripts/',
paths: {
    'flight': '../vendor/flight',
    ....
}

When I use amd-optimize like so:

amdOptimize.src('app/core/boot/main', {
    baseUrl: 'scripts',
    configFile: 'scripts/common.js'
})

I get the error:

Error: No file for module 'app/core/vendor/flight/component' found.

Include example using bower

I haven't been able to figure out how to use bower in a requirejs project using gulp as the builder. I have the following structure:

src/
- main.js
- require.config.js - generated with bower-requirejs
bower_components/
- reqwest

Here's my gulpfile.js:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    amdOptimize = require('amd-optimize'),
    bowerRequireJS = require('bower-requirejs');

gulp.task('default', function () {
    gulp.src(['src/main.js', 'bower_components/**/*.js'])
        .pipe(amdOptimize('main', {baseURL: 'src', configFile: 'src/require.config.js'}))
        .pipe(concat('main.js'))
        .pipe(gulp.dest('public'));
});

gulp.task('bower', function () {
    var options = {
        baseUrl: 'src',
        config: 'src/require.config.js',
        transitive: true,
    };

    bowerRequireJS(options, function (rjsConfigFromBower) {
        console.log('whatever');
    });
});

And here's my require.config.js generated from the 'bower' task:

require.config({
  shim: {

  },
  paths: {
    coordinator: "../bower_components/coordinator/coordinator",
    reqwest: "../bower_components/reqwest/reqwest"
  },
  packages: [

  ]
});

I've tried several different things and I've gotten the same error each time:

No file for module 'request' found

I feel that this is a pretty common problem and it would be fantastic to get an example that works. I have the same behavior working with Grunt, but I'd like to switch to gulp.

Is this something that should work with amd-optimize, or am I barking up the wrong tree?

shimWrap

wrap modules that are not native amd modules

Log Time

Use configFile.deps instead of moduleName

I find it too verbose if there is deps: ["index"] in configFile.

amdOptimize.src("index", {
  configFile : "src/scripts/require_config.js"
});

Better

amdOptimize.src({
  configFile : "src/scripts/require_config.js"
});

I also do not understand why do set files in gulp.src. In the gulp.src must specify only config file.

Much better

gulp.src("src/scripts/require_config.js")
    .pipe(amdOptimize())

Files resolved via paths confg don't get source maps.

I'm migrating a project that was using the require optimizer to amd-optimize. I've been struggling with a build that wasn't getting sourcemaps output and have tracked the problem down to files which get resolved via paths configuration.

My config looks something like this:

var amdConfig = {
    "baseUrl": "./target/js",
    "preserveFiles": true,
    "paths": {
        "class": "/lib/class-amd",
        "passwordstrength": "/lib/passwordstrength-amd",
        "jquery": "empty:",
    }
};

And my task looks more or less like this:

return gulp.src('target/js/**/*.js', { base: amdConfig.baseUrl })
    .pipe(sourcemaps.init())
    .pipe(amdOptimize("project-name/bootstrap", amdConfig))
    .pipe(concat('bootstrap.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./target/js/built'));

I found the problem by removing the concat line and noting that all files appeared to have sourcemaps. This lead me to thinking that perhaps a few files didn't so I inserted a debug log into gulp-sourcemaps to let me know if this was the case. It turns out that both class and password strength don't have sourcemaps associated. This leads to no files having sourcemaps after concat.

If I write a fix I'll PR it here. Just raising the bug here now in case you're more prepared to fix since you are more familiar with the code.

Thanks for the great project :).

Handle cyclic dependencies

Not exactly sure what the correct way to handle cyclic dependencies.
Maybe, just detect them and throw an error. Or work with them when exports is used.
http://requirejs.org/docs/api.html#circular

Allow remote scripts as dependency

In one of projects, we are required to use some third-party trackers, like google analytics.
With requirejs it is just possible to provide a config file aliasing them to some dependency in paths. That forces us to use full requirejs instead of almond because frequent changes in remote trackers could fail anything.
WIth amd-optimize, however, it fails when the remote script is in config.

I propose to replace aliases with full uri's from config and leave them to requirejs to handle.

Option to not modify the source contents file for development accuracy

I am using the module to work out which files are needed and to copy them into another build directory. The problem whilst debugging is that the output file does not exactly match the source file, because the escodegen generate method strips out new lines, and a bunch of other things.
For development it would make sense to have an option like preserveFiles that will not modify the file, so that the output contents ends up being the same as the source file.
I believe I see the fix but want to run it by you, perhaps there is another option that can be passed to the escodegen generate that I've not seen.
I'll send a pull request soon.
thanks

Excluding modules

We have a need to sometimes exclude dependencies from the optimised js file we produce, as they're already available in the page the file will go into.

I know the docs say that options.exclude isn't implemented, but I also noticed that there's a commit adding added deep and shallow exclusion.

Is it possible to have a dependency that isn't processed by amd-optimize, and so can be pulled in from the page the optimized js file is loaded into?

gulp.watch - temporary working solution provided

Hi,

Great plugin! Please keep it going.

In case anybody is trying to get gulp.watch working with this plugin, I suggest that you resort to the following snippet:

process.on('uncaughtException', function (err) {
    console.log(err);
});

There are many solutions which use gulp-plumber, gulp-watch, on('error') but I was not able to get any of these working. Please be aware that the following snippet will catch ANY exception, which may hide other problems.

Rewriting ast instead of string.replace

Caching files for one pass

options.paths

requirejs.config can be like this:

baseUrl:"js/lib", 
paths: {
                page: '../page'
            }

use module js/page/frame.js :

require(['page/frame']);

but in the amd-optiomize options.paths like that it can't run

Error: No file for module 'page/frame' found.

so , them can't user same config ? or I use it error way?

Looking for a new maintainer

Thanks for your interest in this project. However, I am no longer actively maintaining this project. Mostly because we are now using Webpack for our builds.

I am happy to review incoming pull requests, but I won't implement new features.

If there is somebody who would like to become maintainer for this project, please contact me. Thanks!

Change of behaviour of map in config between 0.2.7 and 0.2.8

In 0.2.5, config like below worked:

paths: {
'module_name': './bower_components/path_to/my_module'
},
map: {
'module_name': { 'jquery': 'jquery-1.9' }
}

However as of 0.2.8 (not sure about inbetween), the map seems to want the relative path rather than the module name, giving something like.

paths: {
'module_name': './bower_components/path_to/my_module'
},
map: {
'./bower_components/path_to/my_module': { 'jquery': 'jquery-1.9' }
}

Is this intended?

Question : Cannot read indexOf of undefined

Hi. When actually does this error happen ? I am sure I am missing something, But any suggestion on this will be highly appreciated.

/Users/nododo/https/files/public/UI/node_modules/amd-optimize/lib/trace.js:49
isText = moduleName.indexOf('text!') !== -1;
^
TypeError: Cannot read property 'indexOf' of undefined

Thanks

Add module support

It would be nice to allow modules to be configued in the options so one task could just iterate over all modules instead of creating an individual task for each module.

"modules":[
        {"name":"main.tests"},
        {"name":"main.common"},
        {"name":"main.video"},
]

Add module name into file data

Add module name (which you put into define('module/path/or/name', ...)) into file data:

cwd: ...
base: ...
path: ...
contents: ...
data: {
   amdName: 'module/path/or/name'
   amdDependencies: [...] //also useful
}

See: https://github.com/colynb/gulp-data

Support CommonJS module definitions

It's clear on the readme that CommonJS module definitions are not supported, but this is actually a pretty important use case and is a barrier for adoption.

Is support for this on the roadmap?

Maintain Directory Structure

It'd be nice if it were possible for the tool to output files in the source directory structure.

For example I have

whenever I run them through the tool I get

Controller1.js
CustomDirective.js
app.js

I have a fairly large project and when navigating through the files outputted by the source map it'd be nice if that directory structure was preserved. I'm new to gulp so I'm afraid I don't know if this is possible or not.

amd-optimize finding circular references when require.js isn't.

I have a project that is currently using Grunt and require.js and I am trying to move it over to gulp and amd-optimize.

The problem is that amd-optimize is breaking with a ' Circular dependency detected.' error.

Is there any reason why amd-optimize might return such an error when require.js doesn't when processing the same codebase.

Bug with shimmed dependensies

You add define to the end of simed file. F.e.

vendor.js

(function (global, factory) {
    ...
    return jQuery;
}));

//Add by amd-optimize
define('jQuery', [], function () {
    return;
});

I use compiled file with require.config (not the one that was used angular-amd)

require.config({
    baseUrl: '/app/',
    paths: {
        jquery: 'vendor',
        angular: 'vendor'
    }
    shim: {
        angular: ['jquery']
    }
}

It causes an error Uncaught TypeError: undefined is not a function. But it work if I move define section to top of vendor.js.

Move define sections to top of shimmed files.

Support for require plugins

e.g. text

Log Time

loading order

define(['module1', 'module2', 'module3'], function() {
 ... 
});

Now modules and our dependensies load in correct order (as if the files are loaded synchronously):

module1.dep1.js
module1.dep2.js
module1.dep3.js
module1.js
module2.dep1.js
module2.dep2.js
module2.dep3.js
module2.js
module3.dep1.js
module3.dep2.js
module3.dep3.js
module3.js

This is useful in some cases.

You can guarantee the preservation of order in future versions? For example, to add syncLoading flag

Error: No file for module 'holderjs' found

I am trying to use amd-optimize and find that it struggles with

https://github.com/imsky/holder

when findNestedDependencies is turned on. Even when this option is turned off I cannot get this AMD module to load using amd-optimize.

An error occurred when require text file

Hi, Thanks for the cool plugin first.
I met a problem when I use amd-optimize.
My code is as follows:

define(function (require) {
    var userInfoTemplate = require('text!./templates/userinfo.tpl');
}

After building code is as follows:

define('admin/dashboard/templates/userinfo.tpl', [], function () {
    return 'Hello <%=name %>';
});
define('admin/dashboard/index', [
    'require',
    'exports',
    'module',
    'admin/dashboard/templates/userinfo.tpl'
], function (require) {
    var userInfoTpl = require('text!./templates/userinfo.tpl');
}

But the code after building can not be executed correctly.

require.js:166 Uncaught Error: Module name "text!admin/dashboard/templates/userinfo.tpl_unnormalized2" has not been loaded yet for context: _

If this line:

var userInfoTpl = require('text!./templates/userinfo.tpl');

can be converted to:

var userInfoTpl = require('admin/dashboard/templates/userinfo.tpl');

Then code will be executed correctly!

This is a bug? Or did I do something wrong?

Set module name in define

I have files:

app/file1.js
define([ 'dep1', 'dep2'], function() {...}

How I can get

app/file1.js
define('app/file1', [ 'dep1', 'dep2'], function() {...}

after amd-optimize processing?

Support for require.js bundles

Is it planned/feasible to add support for require.js-style bundles as described in http://requirejs.org/docs/api.html#config-bundles ?

define is not defined

Getting a define is not defined error.

Gulp:

return gulp.src('src/assets/js/*/')
// Traces all modules and outputs them in the correct order.
.pipe(amdOptimize("app", {
paths : {
"jquery" : "./bower_components/jquery/dist/jquery"
}
}))
.pipe(concat("app.min.js"))
.pipe(gulp.dest('build/assets/js/build'));

app.js

require([
'globals'
],function(){});

globals.js

define(['jquery'], function($) {
'use strict';

console.log('hello');

});

CommonJS syntax does not work when not storing into variable

When I have this on the root file:

define(function(require) {
  require('path/to/dep');
});

Then dependency chaining does not work. If I rewrite it in array syntax it does kick in... Bug?

r.js works but amd-optimize won't execute modules

I can't get amd-optimize to work properly, it loads my optimized file but won't run it. I've made a test project, see here.

My `r.js` setup

Config file:

({
    mainConfigFile: 'src/js/config.js',
    baseUrl: 'src/js',
    name: 'config',
    out: 'dist/js/global.js',
    removeCombined: true,
    findNestedDependencies: true,
    optimize: 'none'
})

It yields me the following diat/js/global-r.js:

define('modules/pinkifyer',[],function() {
    document.body.style.backgroundColor = 'pink';
});
define('modules/app',['require','./pinkifyer'],function(require) {
    require('./pinkifyer');
});
require.config({
    urlArgs: 'bust=' + (new Date()).getTime(),
    baseUrl: 'js',
    deps: ['modules/app']
    // deps: ['../dist/js/global.js']
});
define("config", function(){});

If I load in the index.html:

<script data-main="../dist/js/global" src="lib/require.js"></script>

It works, the only module, pinkifyer, makes sets the body bg to pink 🐼

My `amd-optimize` setup

Here's my Gulp taks:

var gulp = require('gulp'),
    amdOptimize = require('amd-optimize'),
    concat = require('gulp-concat');

gulp.task('scripts', function() {
    gulp.src(['src/js/**/*.js'], { base: 'src/js' })
        // Traces all modules and outputs them in the correct order
        .pipe(amdOptimize('modules/app', {
            baseURL: 'src/js',
            configFile: 'src/js/config.js',
            findNestedDependencies: true
        }))
        .pipe(concat('global.js'))
        .pipe(gulp.dest('dist/js'))
});

And it yields dist/js/global.js:

define('modules/pinkifyer', [], function () {
    document.body.style.backgroundColor = 'pink';
});
define('modules/app', [
    'require',
    'exports',
    'module',
    'modules/pinkifyer'
], function (require) {
    require('./pinkifyer');
});

Contents of the config.js are missing from the optimized build results, and hence it wont work. Maybe I'm just doing something profoundly wrong here, quite new to RequireJS.

Support for gulp-sourcemaps

Great tool, but it would be very helpful if I could generate sourcemaps when using this tool. Do you plan to add support for sourcemaps?

Catch acorn's SyntaxErrors to give more meaningful errors

Annotate the file name for example.

More meaningful than just the line num and col.

Example of configFile import

I'm not sure what I'm doing wrong as the documentation doesn't actually show a good example of using a config file. When running the following

gulp.task('amdoptimize', function() {
    amdOptimize.src("main.default", {
        configFile : "./configs/amd.json",
        baseUrl : "./js",
        dir:"./js/build"
    })
    .pipe(concat("main.default.js"))
    .pipe(gulp.dest("js/build"));
});

I get the following error. :'(

[16:58:23] Finished 'amdoptimize' after 11 ms
Error: No file for module 'jquery' found.
...

Here is my amd.json file.

({
    "paths": {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
    },
    "map": {
        "*": {
            "facebook": "//connect.facebook.net/en_US/all.js",
            "facebook-debug": "//connect.facebook.net/en_US/all/debug.js"
        }
    },
    "config": {
        "version": {
            "libs/jquery/lazyload": "1.9.3",
            "libs/jquery/mobile": "1.4.0a1",
            "libs/jquery/numberformatter": "1.2.3",
            "libs/jquery/placeholder": "0.2.4",
            "libs/jquery/scrollbar": "0.2.4.custom",
            "libs/jquery/tablesorter": "2.0.5",
            "libs/jquery/wysibb": "1.5.1",
            "libs/jquery/ui/jquery.ui.core": "1.9.2",
            "libs/jquery/ui/jquery.ui.draggable": "1.9.2",
            "libs/jquery/ui/jquery.ui.mouse": "1.9.2",
            "libs/jquery/ui/jquery.ui.position": "1.9.2",
            "libs/jquery/ui/jquery.ui.slider": "1.9.2",
            "libs/jquery/ui/jquery.ui.touch-punch": "0.2.2"
        }
    }
})

Any idea what I'm doing wrong?

Just looking briefly at the code, it appears as though they're not being captured and processed into the AST, or when processing the AST (via escodegen).

Is there an easy fix to this problem?

Excluding module trees

If you have multiple bundles you don't want module duplication

Log Time

scalableminds / amd-optimize Goto Github PK

amd-optimize's People

Contributors

Stargazers

Watchers

Forkers

amd-optimize's Issues

My r.js setup

My amd-optimize setup

Recommend Projects

Recommend Topics

Recommend Org

My `r.js` setup

My `amd-optimize` setup