I have a gulp rjs task that concatenates and uglifies all my custom .JS files (any non vendor libraries).
What i am trying to do, is exclude some files/directories from this task (controllers and directives).
Heres my tree:
- application
- resources
- js
main.js
- vendor
- jquery
- modernzr
- angular
- controllers
- controller1
- controller2
- controller3
- directives
- directives1
- directives2
- directives3
- widgets
- widget1
- widget2
- widget3
- widget4
- modules
- modules1
- modules2
- modules3
- modules4
Here my gulp.js
dir = {
app: 'application',
dest: 'dest',
};
config = {
src: {
js: dir.app + '/resources/js'
},
dest: {
js: dir.dest + '/resources/js'
}
};
gulp.task('rjs', function() {
rjs({
baseUrl: config.src.js,
out: 'main.js',
name: 'main',
mainConfigFile: config.src.js + '/main.js',
exclude: [ 'jquery', 'angular']
})
.pipe(prod ? uglify({ mangle: false, outSourceMap: true, compress: { drop_console: true } }) : gutil.noop())
.pipe(gulp.dest(config.dest.js))
.pipe(filesize())
.pipe(dev ? connect.reload() : gutil.noop());
});
Quick answer
On src, you can always specify files to ignore using "!".
Example (you want to exclude all *.min.js files on your js folder and subfolder:
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
You can do it as well for individual files.
Expanded answer:
Extracted from gulp documentation:
gulp.src(globs[, options])
Emits files matching provided glob or an array of globs. Returns a stream of Vinyl files that can be piped to plugins.
glob refers to node-glob syntax or it can be a direct file path.
So, looking to node-glob documentation we can see that it uses the minimatch library to do its matching.
On minimatch documentation, they point out the following:
if the pattern starts with a ! character, then it is negated.
And that is why using ! symbol will exclude files / directories from a gulp task
Gulp uses micromatch under the hood for matching globs, so if you want to exclude any of the .min.js files, you can achieve the same by using an extended globbing feature like this:
src("'js/**/!(*.min).js")
Basically what it says is: grab everything at any level inside of js that doesn't end with *.min.js
Related
Hierarchy:
App
.tmp // temp files
app // source files
dist // dist files
So if I put the devcode:build before requirejs:
Files from "app/scripts" are processed and saved into ".tmp/scripts"
Requirejs will be pointed to load the ".tmp/scripts"
Then fails because bower_components are not found at "bower_components"; Of course, because bower_components are located in "app/bower_components"
If I inverse the order:
Requirejs removes the comments and devcode doesn't work
I will remove require.js optimizer and then my build is not ok. Should I pass another uglify over it.
Any better solution? (don't make the pc to copy bower_components all over again, or I might change the position up to the root?)
Thanks
Well I don't need the devcode grunt task becasue requirejs already comes with uglify2 which allows you to have the dist.options.uglify2.compress.global_defs
If you put DEBUG = false then this code will be removed in production mode.
dist: {
options: {
baseUrl : '<%= yeoman.app %>/scripts/',
name : 'main',
mainConfigFile : '<%= yeoman.app %>/scripts/main.js',
out : '.tmp/concat/scripts/main.js',
optimize : 'uglify2',
uglify2: {
//Example of a specialized config. If you are fine
//with the default options, no need to specify
//any of these properties.
output: {
beautify: false
},
compress: {
global_defs: {
DEBUG: false
}
},
warnings : true,
mangle : true
},
}
},
In my project I use yeoman (1.0.6). In a fresh webapp copy installed requirejs-text plugin to include template.html.
main.js
require.config({
paths: {
jquery: '../bower_components/jquery/jquery',
text: '../bower_components/requirejs-text/text'
}
});
require(['jquery', 'text!../templates.html'], function ($, templates) {
....
After building and optimizing a whole project, I expect to have generated templates.js file instead of templates.html ( added
"optimizeAllPluginResources: true" as described here )
Gruntfile.js ( won't paste all code, just optimization settings )
....
requirejs: {
dist: {
options: {
baseUrl: '<%= yeoman.app %>/scripts',
optimize: 'none',
optimizeAllPluginResources: true,
preserveLicenseComments: false,
useStrict: true,
wrap: true
}
}
},
....
After grunt 'build' task is completed I see that template.html content is in main.js and there is no generated templates.js file
After adding (also have to set in copy task to copy requirejs-text plugin form app to dir folder ):
stubModules: ['text'],
exclude: ['text!../templates.html'],
files are excluded as expected, but there is still no templates.js file. ( get an error as expected: XMLHttpRequest cannot load file:///...../dist/templates.html. Cross origin requests are only supported for HTTP. it works fine with local HTTP )
My question is: What settings am I missing to generate templates.js file with a requirejs optimizer?
p.s. googled, spent all day, tried more than wrote here.
Thank You in Advance
I use grunt-contrib-jade, and wanted to specify the task for all jade files, except ones starts with an underscore.
current:
jade: {
dist: {
options: {
pretty: true
},
files: [
{
expand: true,
cwd: '/',
dest: '.tmp',
src: '{,basedir/**/}*.jade',
ext: '.html'
}
]
}
},
this compiles all *.jade files within basedir. I want to exclude all jade files within the hierarchy, where the file names start with _
It looks like it may not be specific to jade, but how grunt tasks specified with the filter syntax. So, how to specify below filter, to indicate to exclude files start with _ to be excluded.
'{,basedir/**/}*.jade'
Thanks
You can specify an array of strings for src, and can exclude files with ! at the beginning of the string (see the file object format documentation here):
src: ['{,basedir/**/}*.jade', '!{,basedir/**/}_*.jade']
Hopefully you can get it from there, I'm not terrible familiar with the globbing syntax.
I am using the following build file and when I build (r.js -o jsbuild/build.js) all the files in the 'script' folder are minified into the 'productionScripts' folder but they are not combined into the config.js file. Therefore I'm still getting the multiple http requests for all the dependencies.
Is there something wrong with my config or am I completely missing something about requireJS?
({
appDir : "../assets/scripts",
baseUrl : "",
dir : "../assets/productionScripts",
optimize: "uglify",
paths: {
config: 'assets/scripts/config'
},
modules: [
{
name: "config"
}
],
mainConfigFile : "../assets/scripts/config.js"
})
Of course once I post I figure it out. I was mixing concepts. My config was saying minify the 'assets/scripts' folder and that's what it was doing.
I updated the script to just minify the main file. In this case 'assets/scripts/config.js' and that's when it combines dependencies. See appropriate config below. The key is to not use 'dir', 'appDir', and 'modules', this is specific to minifying the folder. Use 'out' to specify where dependencies will be minified and combined.
({
baseUrl : "../assets/scripts",
optimize: "uglify",
name: 'config',
mainConfigFile : "../assets/scripts/config.js",
out: "../assets/productionScripts/config.js"
})
I'm using Grunt for building my web project. I installed grunt-contrib-less package und added a task to my grunt.initConfig({..});
less : {
options: {
paths: ['js/base']
},
files: {
'js/base/*.css' : 'js/base/*.less'
}
}
when I run the target less via grunt less, it runs without errors but doesn't compile the less file to a css file.
Running "less:files" (less) task
Done, without errors.
I have installed the lessc package via node, too. Doing lessc <source> <dest> works fine.
Currently I have pointed with the files option directly to one dir which contains one less file for testing. Even if I write the whole file name into files option, it happens nothing...
Later on I want to scan the whole js directory and compile all new modified *.less files.
I have installed following versions:
grunt-cli v0.1.6
grunt v0.4.0
node v0.8.7
npm 1.1.49
BR,
mybecks
The glob pattern js/base/*.css does not match any files, therefore there is no destination. Usually, tasks like this expect multiple inputs to combine into a single output. Also, bear in mind that less is a multi-task, and putting files as a child of less is not doing what you expect. (it is treating it as a target, not a src/dest map)
If you want a 1-1 transform of .less into .css, you can use dynamic expansion. (or you can define each src/dest pair manually, but who wants to do that?)
In your case:
less: {
options: {
paths: ['js/base']
},
// target name
src: {
// no need for files, the config below should work
expand: true,
cwd: "js/base",
src: "*.less",
ext: ".css"
}
}
I used Anthonies solution but stil had an error
Warning: Object true has no method indexOf
If I changed the order putting expand true as second it gave me the error
Unable to read "less" file
where "less" was the value of the first item in my list.
I solved it by changing files into an array like this:
less: {
options: {
paths: ["js/base"]
},
files: [{
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}]
},
I used "grunt-contrib-less" : "^0.11.0"
This works for me, but modified to reflect this scenario:
less: {
options: {
paths: ["js/base"]
},
files: {
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}
},