Starting to use Sails with Jade template is easy with the command:
sails new app --template=jade
How to add Stylus as default CSS preprocessor? (with the latest Sails version)
Its a few step process, first add
First npm install grunt-contrib-stylus then create a file /tasks/config/stylus.js and add:
module.exports = function(grunt) {
grunt.config.set('stylus', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['style.styl'],
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
};
then add, 'stylus:dev' to /tasks/register/compileAssets.js && syncAssets.js
after that add 'styl' to /task/register/copy.js for files to ignore
And it should all work, this is my first stackoverflow answer xD
I wasn't able to find a better way to add Stylus to the latest Sails, than using grunt:
Add grunt-contrib-stylus to project dependencies:
npm install grunt-contrib-stylus --save
Create a new grunt task stylus.js under tasks/config directory:
module.exports = function(grunt) {
grunt.config.set('stylus', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['importer.styl'], //Edit this to match your files
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
};
Task will be executed automatically on sails lift, check result in .tmp/public/styles
Go to tasks/config and add a stylus.js file with the following code:
module.exports = function(grunt){
grunt.config.set('stylus', {
dev: {
files: [{
expand: true,
cwd: 'assets/styles/',
src: ['main.styl'],
dest: '.tmp/public/styles/',
ext: '.css'
}]
}
});
grunt.loadNpmTasks('grunt-contrib-stylus');
}
Then go to tasks/register (which what previous answers missed) and add in both syncAssets.js and compileAsset.js where relevant:
'stylus:dev'
Looking at this pull it looks like it's already built into sails.
If it doesn't work automatically then it can probably be configured in the gruntfile.
Related
This is my very first attempt at configuring a Gruntfile.js and i can't seem to figure out what's causing this "Warning: Task "default" not found. Use --force to continue. Aborted due to warnings." error. Can someone please help me figure out what's wrong with my code. Find source code below:
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
}
}),
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'bower_components/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
clean: {
build: {
src: [ 'dist/']
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'copy'
]);
grunt.registerTask('build', [
'jshint'
]);
grunt.registerTask('default',['build']);
};
You have not defined a task named default. A sample, really small gruntfile.js can be found below:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy: {
main: {
files: [
{ expand: true, src: ['**'], cwd: 'lib/font-awesome/fonts/', dest: 'fonts/', filter: 'isFile' },
]
}
}
});
grunt.registerTask('default', ['copy:main']);
};
So, in this file, I'm loading the NPM package called grunt-contrib-copy. Then in the config, I specify the config for the copy sub-task by giving it a name of main and including the rules below that. Each grunt sub-task has it's own format of options and configuration that you can follow. Finally, I'm saying that the Grunt task runner should have a task named default followed by an order of operations. The first (and only) in my case is the copy sub-task and the main ruleset. In your case, this may be copy:dist for the copy operation.
Hope that helps get you started.
I've found the syntax error. These characters ')};' closed the config in the wrong place (line 30) which disrupted the flow of the program. so i just had to remove them and put them in their rightful place way down on line 67.
Sorry it turned out to be just a silly mistake on my part and probably nothing relevant to anyone else.
I have installed Grunt, Node and updated npm. I am trying to minify all js files into one single file using "grunt uglify". The above command creating new js files with minified code. I placed all JS files in js and also tried with src folders. Below is my code please help With this, I am new to Grunt:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'src/js',
src: '**/*.js',
dest: 'dest/.min.js'
}]
}
},
cssmin: {
my_target:{
files : [{
expand: true,
cwd: 'css/',
src: ['*.css', '.min.css'],
//src: '*.css',
dest: 'css/',
ext: '.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
}
I know it's been a year since the question was asked, but I'd like to contribute anyway for the sake of googling and finding this thread.
To achieve what you're trying to do you should NOT use expand param. Just set src and dest ones. Like this:
module.exports = function(grunt){
grunt.initConfig({
uglify: {
my_target: {
files: [{
src: "js/src/*.js",
dest: "js/main.min.js"
}]
},
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
};
Hope this helps.
I'm having trouble using grunt-contrib-imagemin, insofar as I can't get it to compress any images.
Here's my Gruntfile.js
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/{base,global,medium,large}.css', // All CSS in the CSS folder
],
dest: 'css/build/production.css',
}
},
cssmin: {
build: {
src: 'css/build/production.css',
dest: 'css/build/production.min.css'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'if3/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'imagemin']);
}
When I run grunt from the command line, each of concat and cssmin run fine, whereas imagemin - although running without errors - returns the following message.
Running "imagemin:dynamic" (imagemin) task
Minified 0 images (saved 0 B)
For info, my folder structure is as follows.
if3\
css\
*.css
images\
*.png
*.jpg
js\
*.js
node_modules\
etc.
Gruntfile.js
package.json
*.html
The image folder currently contains 7 PNG and 2 JPG files, but I can't figure out why it's not doing anything with them.
Any help much appreciated.
Thanks
your src-properties in your concat and cssmin tasks do not contain if3. your imagemin config does. removing that should probably help...
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
you don't need use: dynamic {} or static {} and will works perfect.
see: Grunt imagemin running but not minifying
I am trying to automate my workflow with the help of Grunt. I have everything set up, but the watch task is not working - I can start it, but it doesn't detect changes. The problem really must be in the watch task, as I can trigger the sass task by hand and it compiles correctly without problems.
My Gruntfile looks like this:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
'style': 'compressed'
},
expand: true,
cwd: './sass/',
src: 'style.scss',
dest: './css/',
ext: '.css'
},
dev: {
options: {
'style': 'expanded',
},
expand: true,
cwd: './sass/',
src: 'style.scss',
dest: './css/',
ext: '.css'
}
},
watch: {
sass: {
files: ['<%= sass.dev.src %>'],
tasks: ['default']
}
}
});
grunt.registerTask('default', ['sass:dev']);
};
The structure in the project directory looks like this:
Gruntfile.js
index.html
package.json
css
> style.css (created by sass task)
node_modules
> all required modules
sass
> style.scss
To me everything looks good, but as it is not working something must be wrong. My guess it that the paths following the 'expand' option are off, although I already tried other structures that didn't work either.
Because sass.dev.src equals src: 'style.scss'. The watch task configured with files: ['<%= sass.dev.src %>'] will try and watch ./style.scss and not ./sass/style.scss.
The watch task has a cwd option (options:{cwd:'./sass'}) but probably easier to just set it to watch files: ['sass/*.scss'] instead.
Hi I'm new to grunt and I'm having a problem getting it up and running with compass.
This is my Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Read the package.json (optional)
pkg: grunt.file.readJSON('package.json'),
// Metadata.
meta: {
sassPath: 'templates/sass/',
cssPath: 'public/css/',
},
// Task configuration.
compass: {
dist: {
files: {
'<%= meta.cssPath %>*.css': '<%= meta.sassPath %>**/*.scss'
}
}
},
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-compass');
// Default task.
grunt.registerTask('default', ['compass']);
}
But when I run grunt --verbose I get this:
...
Running "default" task
Running "compass" task
Running "compass:dist" (compass) task
Verifying property compass.dist exists in config...OK
Files: templates/sass/ie.scss, templates/sass/print.scss, templates/sass/screen.scss, templates/sass/style.scss -> public/css/*.css
Options: (none)
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
Done, without errors.
So it looks like it sees the files, and even sees where to put them... what is going wrong?
EDIT: Just so people know the final answer... I thought I had tried this before without success, but this morning I ended up getting this to work:
compass: {
dist: {
expand: true,
cwd: '<%= meta.scssPath %>',
src: ['{,*/}*.scss'],
dest: '<%= meta.cssPath %>',
ext: '.css'
}
},
EDIT 2: Okay, for the life of me don't know why, but it only works when a config.rb was present... why would grunt use the compass config is another question...
I think the issue is your destination file. You have to specify an actual file, not *.css. Try tweaking your config slightly:
compass: {
dist: {
files: {
'<%= meta.cssPath %>compiled.css': '<%= meta.sassPath %>**/*.scss'
}
}
}