I resolved an issue simply by replacing "path/to/resource" with "./path/to/resource". Is this important?
concat: {
css: {
src: [
'public/css/datepicker.css',
'public/css/jquery.tagsinput.css',
'./src/css/sass_styles.css', // << previously 'src/css/sass_styles.css'
'application/themes/japantravel/style.css'
],
dest: './public/css/all.css',
},
options: {
process: function(src, filepath) {
return "/* #### FILENAME: " + filepath + " #### */\n\n" + src + "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n";
}
}
},
Is it better to use "./" prefix? Why would this matter? I thought both paths were the same.
Generally there's no difference, and it shouldn't matter. Adding the prefix ./ is used in cases where the directory or file starts with something that the computer (or framework) wouldn't normally recognize as a file. For example, in a unix shell if you had a directory named "-really_weird_name", it will treat that starting -r as an argument and would give an error if you tried to cd -really_weird_name. To get around this, you can add ./ — cd ./-really_weird_name.
My guess is that grunt sees the src in src/css/... and thinks you're specifying another source file. What happens if you change the directory name from "src"; can you safely remove the leading ./ if you do so?
Related
I am unsure when the way the NPM installs dependencies changed.
In the past I remember that if in my project.json I had a dependency on "abc", which in turn would depend on "xyz", a npm install would result in something like:
package.json
node_modules/
abc/
node_modules/
xyz/
some-dev-dep/
When packaging my node project to be used by AWS Lambda, I would have to include that node_modules structure (less any dev-dependencies that were there). I would use Grunt for my packaging, so I wrote this handy thing to help me get all production dependencies into this zip (extracting part of my gruntfile.js):
function getDependencies(pkg) {
return Object.keys(pkg.dependencies)
.map(function(val) { return val + '/**'; });
}
var config = {
compress: {
prod: {
options: {
archive: 'public/lambda.zip'
},
files: [
{ src: 'index.js', dest: '/' },
{ expand: true, cwd: 'node_modules/', src: getDependencies(pkg), dest: '/node_modules' }
]
}
}
};
This would work because dependencies of my dependencies were nested.
Recently (or maybe not-so-recently) this has changed (I am unsure when as I was using very old version of NPM and updated it recently).
Now if I depend on "abc" which in turn depends on "xyz" I will get:
node_modules/
abc/
xyz/
some-dev-dep/
As you can see, my way of getting only production dependencies just won't work.
Is there any easy way to get only list of production dependencies (together with sub-dependencies) within grunt job?
I could do it using recursive function scanning for my dependencies, and then checking project.json files of those and then searching for sub-dependencies etc. This approach seems like a lot of hassle that is possibly a common scenario for many projects...
Here is a function that returns an array of the production dependency module names. (Note: you might need to have the 'npm' module installed locally in your project for this to work.)
/**
* Returns an array of the node dependencies needed for production.
* See https://docs.npmjs.com/cli/ls for info on the 'npm ls' command.
*/
var getProdDependencies = function(callback) {
require('child_process').exec('npm ls --prod=true --parseable=true', undefined,
function(err, stdout, stderr) {
var array = stdout.split('\n');
var nodeModuleNames = [];
array.forEach(function(line) {
var index = line.indexOf('node_modules');
if (index > -1) {
nodeModuleNames.push(line.substr(index + 13));
}
});
callback(nodeModuleNames);
});
};
This change was introduced with the release of npm 3 (see npm v3 Dependency Resolution).
It's not exactly clear why you need to use Grunt at all. If what you want to do is get only production dependencies you can simply run:
npm install --production
With the --production flag, all dev dependencies will be ignored. The same is also true if the NODE_ENV environment variable is set to 'production'.
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
My Brunch template compiles all my code into app.js and all third party dependencies into vendor.js (a pretty standard approach). I'd like to do the same with CSS and it used to work but as I moved to using Bower something stopped working and I now get the following error:
Error: couldn't load config /path-to-root/config.coffee. SyntaxError: unexpected {
at Object.exports.loadConfig (/usr/local/share/npm/lib/node_modules/brunch/lib/helpers.js:448:15)
from a configuration file (config.cofee) that looks like this:
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(bower_components|vendor)/
'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/
stylesheets:
joinTo:
'stylesheets/app.css': /^app/
'stylesheets/vendor.css': /^(bower_components|vendor)/
If I instead just strip out the two lines for stylesheets and put this single line in its place it works without error:
'stylesheets/vendor.css': /^(app|bower_components|vendor)/
I've been sort of living with this but this is causing more and more problems and I'd like to get it sorted. Any help would be greatly appreciated.
In case the question comes up ... the version of brunch I'm using is 1.7.6.
I am baffled but I think Paul's suggestion that maybe a special character had gotten into the file seems likely. I now have it working with a configuration that appears to be identical to what was NOT working earlier. Here's the full configuration file:
sysPath = require 'path'
exports.config =
# See http://brunch.io/#documentation for documentation.
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(bower_components|vendor)/
'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/
stylesheets:
joinTo:
'stylesheets/app.css': /^app/
'stylesheets/vendor.css': /^(bower_components|vendor)/
templates:
precompile: true
root: 'templates'
joinTo: 'javascripts/app.js' : /^app/
modules:
addSourceURLs: true
# allow _ prefixed templates so partials work
conventions:
ignored: (path) ->
startsWith = (string, substring) ->
string.indexOf(substring, 0) is 0
sep = sysPath.sep
if path.indexOf("app#{sep}templates#{sep}") is 0
false
else
startsWith sysPath.basename(path), '_'
It's pretty weird but I had to do the following (add / at the end) for the same case
stylesheets: {
joinTo: {
'css/vendor.css': /^(vendor|bower_components)\//,
'css/styles.css': /^app\/css\//
}
}
I had the same problem as Ken. What solved it for me is just deleting the offending lines from the config.coffeefile and simply just re-typing them again from scratch. This ensures no hidden characters are present and makes the script running again.
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'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"
}
},