Less Middleware with Express - css

I am trying to setup less on my nodejs project and when i request my page from browser less-middleware debug show me wrong path and dest path. When i ask for example '/public/css/index.css' from my webpage i adds '/public/css/' to the source path. Below are mine configures:
app.use(lessMiddleware(__dirname+'/server/less',{
debug: true,
dest: __dirname+'/public/css',
once: true
}));
And debug screen shows:
pathname : /public/css/index.css
source : D\Work\project\server\less\public\css\index.less
destination : D\Work\project\public\css\public\css\index.css
Even if i fix the destination path, i am having problem with source and i dont want to put my less files into public folder. Is there a way of remove that /public/css from compiled less.
I have tried to add:
'preprocess.path': function(pathname, req){
console.log(pathname);
}
but console.log never shows. Also perhaps there is a way to not compile every css file users ask and just compile those less files which i have in less folder.
P.S. every module i am using is under "*" version.

You might try this (accessing "/css/style.css" within your browser):
app.use(lessMiddleware({
src: __dirname+"/server/less",
dest: __dirname+"/public/css",
prefix: "/css",
// force true recompiles on every request... not the
// best for production, but fine in debug while working
// through changes
force: true,
debug: true
}));

Actually it was simple enough.
app.use(lessMiddleware(__dirname+'/server/less/',{
debug: true,
dest: __dirname,
force: true
}));
So now in the folder /server/less we create folder public/css and everything is pulling in right way. Also if we have folder admin/css it works too. Trick was to create folders in folder /server/less

Related

bower install via grunt does not copy all files to targetDir

In an inherited polymer 1.0 project the setup involves a gruntfile which calls, among other things, bower to install the necessary resources. However, in the later steps, some files cannot be found and the grunt task fails. I am new to both bower and grunt and feeling a little lost.
The file in question that cannot be found is myproject\components\polymer\polymer-mini.html, though there are more in similar positions which I found out by copying the file there by hand.
My first step was to isolate the bower install task and watch it while it was working. This is its configuration in the gruntfile.js:
bower: {
install: {
options: {
targetDir: './components',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: true,
cleanBowerDir: true,
bowerOptions: {}
}
}
}
By pausing the execution after single steps in verbose mode I found the following to happen during installation:
the old myproject/components folder is deleted if it exists
files are created as normal in a myproject/bower_components folder
files are then copied to the targetDir myproject/components
however, not all files seem to arrive there
myproject/bower_components is deleted after copying
Comparing the contents of myproject/bower_components and myproject/components reveals that many files present in the original folder are missing in the target one. For example, the mentioned myproject/components/polymer only contains a polymer.html - however, there are seven files in myproject/bower_components/polymer, including the missing polymer-mini.html.
Apparently, something filters what is copied to the targetDir and what isn't.
Can I influence this in any way or is this setup even correct as it is now? I have seen grunt-bower-task and Polymer but cannot make much of it - except that the accepted solution apparently copies everything by hand after the installation of bower_components. Surely, there must be a better way?
I ended up copying the files independently of the bower task by calling a copy task configured as such:
copy: {
main: {
files: [
{ expand: true, cwd: 'bower_components/', src: ['**'], dest: 'components/', filter: 'isFile' }, // bower components
]
}
}
Of course, in this case the bower task has to be reconfigured not to delete the bower directory from which to copy.
bower: {
install: {
options: {
targetDir: './components',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: true,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
This isn't really what I hoped for but in the meantime it gets the job done.

JHipster - Running application inside a context, Image and Glyphicons problems

I have a project generated with JHipster and would like to deploy it inside a context in Tomcat (not at root context).
There seems to be grunt task to change image and font to use a full path in the css. (cssmin)
I have found this link to remove the cssmin but did not succeed in preventing this problem.
I'm searching a way to continue using the same task (cssmin) and be able to deploy a JHipster app in any way possible (as Tomcat root context or in a context /jhipster).
The current master branch contains a fix for this. If you can't wait for the next release you need to modify your Gruntfile.js.
First: Make cssmin use relative paths by removing the option root: 'src/main/webapp'
Second: You need a seperate copy task to copy the required fonts into the correct directory:
copy: {
fonts: {
files: [{
expand: true,
dot: true,
flatten: true,
cwd: 'src/main/webapp',
dest: '<%%= yeoman.dist %>/assets/fonts',
src: [
'bower_components/bootstrap/fonts/*.*'
]
}]
}
Third: Add the new copy task to the build task by adding 'copy:fonts' to the build tasks.

grunt-contrib-clean task doesn't delete files with network src path

I faced a trouble attempting to clean distributive directory on remote file server.
I have a folder and access it via double slash notation like
//foldername/projectname/subfolder/
I've configured my Gruntfile.js for grunt-contrib-clean task like this:
clean: {
files: [
{
src: ['//foldername/projectname/subfolder/']
}
]
}
In my tasks list I also have a grunt-contrib-copy task which launches after grunt-contrib-clean to load distributive and this task uses the same src path to folder on network.
So when i launch the grunt - "clean" task actually doesn't clean the subfolder but the "copy" succesfully copies files.
When I try to launch grunt with --verbose command i have a next log:
Running "clean" (clean) task
Verifying property clean exists in config...OK
Files: [no src]
Options: force=false, no-write=false
Options: force=false, no-write=false
So it seems that task can't find the files but the reason is undefined.
Access to server is authorized and i'm enter credentials via default Windows prompt. And I have credentials for changing/deleting folder.
Can anybody help me and answer why the clean task doesn't find my directory.
Thanks!
It does. Here is an example:
dev: {
options: {
'force': true
},
expand: true,
cwd: '//someserver/someshare/somepath',
src: '{,*/}*'
},
Use force=true to go clean the subfolder:
force
Type: Boolean
Default: false
This overrides this task from blocking deletion of folders outside current working dir (CWD). Use with caution.
and no-write=true to get verbose output.
Also, check the version to see if the Windows bug has been fixed:
2013-07-15   v0.5.0   Use rimraf directly, version 2.2.1 to fix issue on Windows. Add no-write option to mimic grunt.file.delete behavior.
References
npmjs: grunt-contrib-clean
grunt-contrib-clean: Failing on Windows 8

grunt-contrib-connect not serving files from my specified base

I have a very simple configuration for grunt-contribu-connect in my Gruntfile.
connect: {
dev: {
base: 'dist'
}
},
The task runs and is kept alive by my watch task, but, whenever I try to open a page from this base directory, I get error output instead of the desired page.
Cannot GET /odds.html
In this image, you can see my project structure. The Gruntfile is at the project base, and the odds.html file I want to open is in the dist folder relative to that.
Here, you can see the error along with the URI I'm trying to hit.
I'm sure I'm overlooking something silly, but I cannot see it. Please help! Thanks.
I believe that you need to add 'options' and/or 'keepalive' as follows.
connect: {
dev: {
options: {
base: 'dist',
keepalive: true
}
}
},
I hope this helps you.

Grunt watch - detecting success and failure of tasks

UPDATE
I'm currently using a solution similar to that described here for error notifications, and the 'Current workaround' below (without modifying the grunt force option) for success notifications.
ORIGINAL QUESTION
I'm having trouble determining when a sub-task run by the grunt-contrib-watch has finished (successfully or not).
Specifically, I'm using grunt-contrib-coffee and grunt watch to compile my CoffeeScript files as they change. The compilation is working fine.
What I would like to do is notify myself of the status of the compilation. Here's what I've tried (all code in CS):
Current workaround
From SO Question (How can I make a Grunt task fail if one of its sub tasks fail?)
What I don't like: setting and restoring a global option seems clunky, especially since it's happening in different tasks / event handlers. Also, I have to delete the destination file every time.
Without setting the global option, I can notify a successful compilation, which is great, but I would like to notify a failed one as well.
grunt.initConfig
watch:
options: nospawn: true
coffee:
files: '<%= coffee.dev.cwd %>/<%= coffee.dev.src %>'
options:
events: ['changed', 'added']
coffee:
dev:
expand: true
cwd: 'app'
src: '**/*.coffee'
dest: 'public'
ext: '.js'
grunt.registerTask 'completedCompile', (srcFilePath, destFilePath) ->
grunt.option 'force', false
if grunt.file.exists( destFilePath )
# notify success
else
# notify failure
grunt.event.on 'watch', (action, filepath) ->
if grunt.file.isMatch grunt.config('watch.coffee.files'), filepath
filepath = # compose source filepath from config options (omitted)
dest = # compose destination filepath from config options (omitted)
if grunt.file.exists( dest )
grunt.file.delete dest # delete the destination file so we can tell in 'completedCompile' whether or not 'coffee:dev' was successful
grunt.option 'force', true # needed so 'completedCompile' runs even if 'coffee:dev' fails
grunt.config 'coffee.dev.src', filepath # compile just the one file, not all watched files
grunt.task.run 'coffee:dev'
grunt.task.run 'completedCompile:'+filepath+':'+dest # call 'completedCompile' task with args
Another option (so slow)
As suggested by another SO Question (Gruntfile getting error codes from programs serially), I used grunt.util.spawn.
This worked, but it was pretty slow (several seconds every time the CS file is saved).
grunt.event.on 'watch', (action, filepath) ->
if grunt.file.isMatch grunt.config('watch.coffee.files'), filepath
filepath = # compose source filepath from config options (omitted)
dest = # compose destination filepath from config options (omitted)
if grunt.file.exists( dest )
grunt.file.delete dest # delete the destination file so we can tell in 'completedCompile' whether or not 'coffee:dev' was successful
grunt.util.spawn {
grunt: true # use grunt to spawn
args: ['coffee:dev']
options: { stdio: 'inherit' } # print to same stdout
}, -> # coffee:dev finished
if grunt.file.exists( dest )
# notify success
else
# notify error
Other attempts
I tried a slew of things.
grunt.fail.errorcount (when used in the 'completedCompile' task) is non-zero if previous compilations have failed. (Is it safe to manually reset this to zero? If yes, I wouldn't have to delete the dest file every time.) Even so, this requires setting the global option 'force' to true.
Anything involving specifying the 'watch.coffee.tasks' options in grunt.initConfig doesn't work because the 'coffee:dev' task is run after the 'watch' event handler has completed.
grunt.task.current always refers to the 'watch' task, of course
If you've made it this far, thanks for reading :).
I've also been having the same issue, trying to figure out when a watch sub task is complete.
Part of the problem it seem's is that Watch by default will spawn a new Grunt process to run the sub task. So your main Grunt process won't know about the tasks finishing. You can set 'nospawn' but this doesn't help much as watch doesn't expose the sub task itself.
The nearest I could get to this was using Grunt.util.hooker (inspired by Grunt Notify) to react when the Grunt fail 'report' method is called.
grunt.util.hooker.hook(grunt.fail, 'report', function(){});
However this contains no information on the actual task completed, which would be helpful if you wanted to do something based on specific sub tasks within your watch task.
Looking at the Grunt Watch github there seems to be some traction to implement a complete/fail event:
https://github.com/gruntjs/grunt-contrib-watch/issues/131
I think Grunt-Notify would do what you are looking for.

Resources