I have several task to concatenate css and javascript together, here is an example:
gulp.task('javascript', function() {
return gulp.src([
libPath + 'jquery-2.1.4.min.js',
libPath + '*.js',
jsPath + 'app.js'
])
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest(jsPath))
});
Ideally (in this example) I would like following order jQuery -> libraries -> app.js and so far, using code above it seems to work. However I conducted a little research and people seem to be using plugins like gulp-order or require streamqueue .. method instead of require gulp.src, thus I wanted to make sure that these are needed, or does gulp take care of that now?
For what I saw in the links, those plugins are used to order the stream of multiple files, like: gulp.src(["js/*.js"]), but you are explicitly declaring the order, so it works.
Related
I write different files under JavaScript Module Patern like this:
file 1.js
var Module = (function (module) {
module.function = function () {
console.log(this.thirdFunction) // This is my issue. I cannot access the function from the third file because it is concatenated in a way that the function still not exist.
};
return module;
}(Module || {}));
some-folder/file 2.js
var Module = (function (module) {
module.somethingElse = function () {
};
return module;
}(Module || {}));
whatever/file 3.js
var Module = (function (module) {
module.thirdFunction = function () {
};
}(Module || {}));
I put all these files in different directories, names in a different time.
Then I am using concatenating tool to have one file and then I use it in my html file. But I am facing trouble that I cannot resolve.
To have all these working, I have to include them in a specific way and order to call functions from whatever I need and to re-order files when something is not yet defined/created in the returned final object. If I have 100 files and folders it will be a trouble for me again.
Do I understand this right: http://gruntjs.com/configuring-tasks#globbing-patterns
that I have manually to order files, folders and everything in my grunt tasks?
I do not want to use AMD tools, just plain JavaScript files and some approach to hack the order requirements. If there is no any easy idea for me to you, I would try the AMD tools like require.js but I am not sure if these kind of tools can help with this lame problem.
I would appreciate some grunt tool, some files/folders names conventions, anything that would not force me to install more and more tools.
Thank you in advance!
Another thing that bothers me is the following:
If I want to isolate code but I do not have to return object property in the final object, is it alright to do something like this:
file 4.js
var Module = (function (module) {
var someThing = Module.somethingElse() // from file 2.js
and then using someThing here for clicking, DOM rendering, etc, etc
}(Module || {}));
Is it stupid to stick to the same var Module conventions for files where I actually do not return anything? I just think of way how to avoid the object name and using this again
Indeed, AMD tools were created just for this kind of problem. However you can work around this to some extent with grunt. You could simply organize the files that need to go first into a folder and list them out in the order you want, and then have another folder containing all files who's order doesn't matter, which will include everything.
'js/main/First.js',
'js/main/Second.js',
'js/rest/*.js'
No matter what you choose for this project, you might want to look into Require.js or Browserify for future work.
I've set up some simple Gulp tasks to process my CSS files.
The tasks are put together in one 'master' task:
gulp.task('process-css', ['concatCSS', 'minifyCSS', 'renameCSS']);
Just for reference, the definition of the concrete tasks follows:
gulp.task('minifyCSS', function() {
return gulp.src('themes/my_theme/css/dist/*.css')
.pipe(sourcemaps.init())
.pipe(minifyCSS())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('themes/my_theme/css/dist/'));
});
gulp.task('concatCSS', function() {
var files = [
'themes/rubbish_taxi/css/bootstrap.css',
'themes/rubbish_taxi/css/custom.css',
'themes/rubbish_taxi/css/responsive.css',
'themes/rubbish_taxi/css/jquery.fancybox.css'
];
return gulp.src(files)
.pipe(concat("bundle.css"))
.pipe(gulp.dest('themes/my_theme/css/dist/'));
});
gulp.task('renameCSS', function() {
gulp.src('themes/my_theme/css/dist/bundle.css')
.pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(gulp.dest("themes/my_theme/css/"));
});
The tasks complete without an error, but the problem is that minifyCSS does not minify the source file. An unminified version of the files is saved as bundle.min.css. I believe that the reason is that minifyCSS runs before concatCSS completed.
How can I make the tasks be executed synchronously?
Is my only option to specify which tasks should be executed before a give task like this:
gulp.task('minifyCSS', ['concatCSS'], function() {..} ?
It worked when I set it this way, but I wanted to avoid this to make code more readable.
gulp.task('minifyCSS', ['concatCSS'], function() {..} ?
It worked when I set it this way, but I wanted to avoid this to make code more readable.
More readable how? You're stating that minifyCSS is dependent on concatCSS. The line of code I quoted above is how you explain this dependency to gulp.
The alternative is to use something like run-sequence, but I think avoiding functionality built into the tool to solve the exact problem you're facing isn't justified by the desire for a subjective improvement in readability.
I'm using gulp to build a single javascript file with gulp-concat and gulp-uglify.
Original Files
//File 1
var Proj = Proj || {};
//File 2
Proj.Main = (function() {
var Method = function(){ /*Code*/ };
return { "Method":Method };
})();
//File 3
Proj.Page = (function() {
var Method = Proj.Main.Method;
return { "Method":Method };
})();
Gulp returns a bad minified file because these files are being concatenated in the wrong order. I know I can specify the order in .src([]) but I don't want to maintain the array as I add javascript files.
Is there a way to create references to these "namespaces" without having to worry about the order of the files concatenated? Or, is there a way for gulp to handle concatenation with the knowledge of these namespaces auto-magically?
EDIT:
I know I can specify the file order inside the .src([]). I want to develop without having to worry about the file order, whether it be through a gulp package or a javascript framework. Thank you for responses that help but I need a definitive "No. You cannot do this." or "Yes. Here's how..." to mark the thread as answered.
Well, one option is to try gulp-order.
Also, check out this answer to "gulp concat scripts in order?".
Basically, it mentions what you already said, about having to explicitly name the files in the order you want them to come in. I know you don't want to do that, but how else would gulp know which order you want your files in?
One thing worth pointing out, though, is that you have a group of files where the order doesn't matter, and then, say, 2 files where the order does matter, you can do something like this:
gulp.src([
'utils/*.js',
'utils/some-service.js',
'utils/something-that-depends-on-some-service'
])
gulp-concat doesn't repeat files, so everything that's not some-service.js or something-that-depends-on-some-service.js will get concatenated first, and then the last two files will be concatenated in the proper order.
Since it hasn't been mentioned, implementing webpack or browserify will absolutely solve this problem without implementing some sort of hacky feeling solution.
Here is a simple example of how to use it:
var source = require('vinyl-source-stream'), //<--this is the key
browserify = require('browserify');
function buildEverything(){
return browserify({
//do your config here
entries: './src/js/index.js',
})
.bundle()
.pipe(source('index.js')) //this converts to stream
//do all processing here.
//like uglification and so on.
.pipe(gulp.dest('bundle.js'));
}
}
gulp.task('buildTask', buildEverything);
And inside your files you use require statements to indicate which files require others.
In order to build the final JS source for a web app, I am compiling JavaScript templates, CoffeScript sources and vanilla JS vendor scripts. A final task, dependent on the former three, would then concatenate the scripts together into one file.
The following setup, in which I define the last task with dependencies to the first three, the final step never executes. It seems that process doesn't wait until the partial files are written to the disc.
I tried merging event streams as well, but it seems to be an overkill for something like this. I'd appreciate if someone can point me in the right direction here.
// compile JS templates
gulp.task('js-build-template', function() {
gulp.src('./../app/assets/javascripts/**/*.jst.eco')
.pipe(eco({ basePath: 'app/assets/javascripts', namespace: 'JST_ATL' }))
.pipe(concat('_templates.js'))
.pipe(gulp.dest('public/assets/scripts/partials'));
});
// compile CoffeeScript source
gulp.task('js-build-source', function() {
gulp.src(js.source)
.pipe(coffee())
.pipe(concat('_source.js'))
.pipe(gulp.dest('public/assets/scripts/partials'));
});
// compile vendor scripts
gulp.task('js-build-vendor', function() {
gulp.src(js.vendor)
.pipe(concat('_vendor.js'))
.pipe(gulp.dest('public/assets/scripts/partials'));
});
// concatenate and fingerprint files
gulp.task('js-build', [ 'js-build-template', 'js-build-source', 'js-build-vendor' ], function() {
gulp.src([ 'public/assets/scripts/partials/_templates.js', 'public/assets/scripts/partials/_vendor.js', 'public/assets/scripts/partials/_source.js' ])
.pipe(concat('app.js'))
.pipe(gulp.dest('public/assets/scripts'))
.pipe(rev())
.pipe(gulp.dest('public/assets/scripts'))
.pipe(rev.manifest())
.pipe(gulp.dest('public/assets/scripts'));
});
in all 3 of your task you need return statements
gulp.task('js-build-template', function() {
return gulp.src('./../app/assets/javascripts/**/*.jst.eco')
.pipe(eco({ basePath: 'app/assets/javascripts', namespace: 'JST_ATL' }))
.pipe(concat('_templates.js'))
.pipe(gulp.dest('public/assets/scripts/partials'));
});
this will help in letting final task know that they have finished and it needs to start...
I have a require.config in my main like the following.
require.config({
baseUrl:'scripts/',
paths:{
jquery:'shell/lib/jquery/jquery-1.7.1'
// many libraries and modules are aliased here
},
map:{
'*':{
'underscore':'shell/lib/underscore/underscore'
// a few other modules are mapped here
}
}
});
I did this because the files defined in map are using internal dependencies(in their respective folders) using relative paths.
Now when I run optimizer, the modules defined in path are saved as module IDs, like jquery saved as jquery while those in map are getting complete paths, like 'underscore' as 'shell/lib/underscore/underscore' instead of 'underscore'.
This is causing problems as I am using 'underscore' in other modules also and there the optimized file is having 'underscore' instead of 'shell/lib/underscore/underscore'.
Is there some specific way to optimize when we give map configs or something I am missing? Please tell me how to fix it.
Thanks
I'm not sure to understand the issue:
This is causing problems as I am using 'underscore' in other modules also and there the optimized file is having 'underscore' instead of 'shell/lib/underscore/underscore'.
This seems to be the expected behavior, you mapped underscore to that path for all modules. So basically you are telling to r.js: each time that you find the underscore dependency rewrite it to shell/lib/underscore/underscore. If your modules use "internal paths" and you want do do the opposite (make them to reference underscore), you need to do the opposite mapping:
'some/path/underscore': 'underscore'
In that case all the modules will be pointing to the same underscore module. Even those that use some strange path for underscore.
In the extreme case that you need to control how r.js writes modules on disk. You can use the onBuildWrite property (see https://github.com/jrburke/r.js/blob/master/build/example.build.js#L517).
For example:
onBuildWrite: function ( moduleName, path, contents ) {
if ( path === './src/somefile.js' ) {
return contents.replace(/^define\('src\/underscore'/, "define('underscore'");
} else {
return contents;
}
}
This example is a "hack" that tell to r.js: when you process somefile.js, replace src/underscore with underscore (is exactly what you do with map... but is just to show you how you can use onBuildWrite to do nasty things).