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.
Related
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
I use grunt-serve and access the files that it serves through
localhost:9000, I want to change that to
localhost:9000/mypath
I read on the documentation that I can do the following
'serve': {
'path': '/Users/user/Documents/workspace/project'
}
But I don't know where to put this options.
I have found a similar question but no answers.
The configuration block for the grunt-serve plugin should reside (as with any other task configuration) in the config object passed to grunt.config.init, e.g.:
grunt.config.init({
serve: {
path: '/Users/user/Documents/workspace/project'
},
// ...
});
Here's an example GruntFile for a "clean" task (using the grunt-contrib-clean plugin):
clean: {
dry: {
src: ["build/css"],
options: {
'no-write': true
}
}
}
Running grunt clean:dry would output:
Running "clean:dry" (clean) task
>> 2 paths cleaned.
Done, without errors.
Using grunt clean:dry -v, gives me what I want:
Running "clean:dry" (clean) task
Not actually cleaning live/css...
Not actually cleaning live/js...
...but it also displays a bunch of configuration logs that have nothing to do with the current task. Can I use the --verbose flag (or something else) to show the full output of a task without having to scroll through all of the non-related config logs?
PS: My other plugins suffer from the same problem, displaying only a single line of output when their documentation indicates that I should expect more.
(Related questions: Logging from grunt-contrib-jasmine and How can I force JSHint running in grunt to always use the --verbose flag do not answer this question).
There are some insights into this.
grunt.initConfig({
verbosity: {
default: {
options: { mode: 'dot' }, // normal, oneline, dot, hidden
tasks: ['groundskeeper', 'requirejs']
}
}
grunt.registerTask( '_start', ['verbosity:default', 'projectInfo'] );
Ok, so I've created a new ASP.Net 5/MVC 6 project in Visual Studio 2015 Preview. In keeping with our current method of doing things, for styling I want to use .less files. Creating the files is straightforward, but Web Essentials no longer compiles them.
So my question is this: what precisely do I need to do to get my .css files generated when I save the .less files?
Based on my adventures getting Typescript to work nicely, I will have to use Grunt to accomplish this task, but I am brand-new to Grunt and so I'm not sure how one would do it?
Please help!
With VS 2015 Web Essential is split into multiple extensions you can download
the Web Compiler extension from here and it also has details on how to use it.
It is certainly not elegant as it used to be, but if you are using existing project and want to use a compiler for LESS then this may do the basic job.
So here's how to do it (compile on build and non-elegant compile on save):
Step 1
Open up your package.json file (it's in the root of your project) and add these lines:
"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"
Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions.
Step 2
Right-click on the NPM folder (under Dependencies) and click Restore Packages. This will install less and grunt-contrib-less.
Step 3
Once those packages are restored, go to your gruntfile.js file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfig
less: {
development: {
options: {
paths: ["importfolder"]
},
files: {
"wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
}
}
}
You'll also need to add this line near the end of gruntfile.js:
grunt.loadNpmTasks("grunt-contrib-less");
Step 4
Then just go to View->Other Windows->Task Runner Explorer in the menu hit the refresh icon/button, then right-click on less under Tasks and go to Bindings and tick After Build.
Hooray, now less files will compile and we (I) learned about grunt, which seems really powerful.
Step 5: Compiling on save
I still haven't got this working to my satisfaction, but here's what I've got so far:
As above, add another NPM package grunt-contrib-watch (add to package.json, then restore packages).
Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well):
watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
So you'll now have something like this in your gruntfile.js:
/// <binding AfterBuild='typescript' />
// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
watch: {
less: {
files: ["less/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
},
less: {
development: {
options: {
paths: ["less"]
},
files: {
"wwwroot/css/style.css": "less/style.less"
}
}
}
});
// This command registers the default task which will install bower packages into wwwroot/lib
grunt.registerTask("default", ["bower:install"]);
// The following line loads the grunt plugins.
// This line needs to be at the end of this this file.
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};
One can then simply set this task to run on Project Open (right-click on watch under Tasks in the Task Runner Explorer (it's under View->Other Windows in the top menu) and you're done. I would expect you'd have to close and re-open the project/solution to get this to kick in, otherwise you can manually run the task.
(Note: there is now a new question asked here directly concerning sass. I tried to alter the question and tags in this question to include sass, but someone didn't allow it.)
I would like to add the answer to the same question for sass (.scss). The answer is so related I think these may best be combined as two answers in this same post (if you disagree, please let me know; else, we might add "or sass" in the post title?). As such, see Maverick's answer for some fuller details, here's the nutshell for sass:
(Pre-step for Empty Projects)
If you started with an empty project, first add Grunt and Bower:
Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)
package.json:
"devDependencies": {
"grunt": "^0.4.5",
"grunt-bower-task": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.9.2"
}
(FYI: grunt-contrib-sass link)
Then:
Dependencies -> right-click NPM -> Restore Packages.
gruntfile.js
1) Add or make sure these three lines are registered near the bottom (as NPM tasks):
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");
2) Again in gruntfile.js, add init configurations, something like the following.
{ Caveat: I am no expert on such configurations. I found the sass configuration on an excellent blog post some time ago that I can't locate at this time in order to give credit. The key was I wanted to find all files in the project within a certain folder (plus descendants). The following does that (notice "someSourceFolder/**/*.scss", and see important related note here). }
// ... after bower in grunt.initConfig ...
"default": {
"files": [
{
"expand": true,
"src": [ "someSourceFolder/**/*.scss" ],
"dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
"ext": ".css"
}
]
},
"watch": {
"sass": {
"files": [ "someSourceFolder/**/*.scss" ],
"tasks": [ "sass" ],
"options": {
"livereload": true
}
}
}
Now follow the instructions for Task Runner Explorer as given in the other answer. Make sure to close and reopen project. It seems you have to run (double click) 'watch' (under 'Tasks') every time the project is started to get the watch watching, but then it works on subsequent saves.
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