grunt-contrib-less creates the app.css file during launch but not during live reload - node.js

Basically, at the beginning all is ok but after modifications, CSS are not updated.
First, my package details:
"node" : "0.10.21"
[...]
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-jshint": "~0.7.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-less": "~0.8.1"
Next, my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ''
},
dist: {
src: [ 'src/js/libs/jquery-2.0.3.min.js',
'src/js/libs/**/*.js',
'src/js/app/**/*.js'],
dest: 'public/js/combo.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'public/js/combo.min.js': ['public/js/combo.js']
}
}
},
less: {
compile: {
options: {
compress:true
},
files: {
'public/css/application.css': ['src/css/application.less']
}
}
},
jshint: {
files: ['gruntfile.js', 'src/js/**/*.js','src/css/**/*.less','public/index.html'],
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['default']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat','uglify','less','watch']);
};
Explanations
At first, all works perfectly, all the files are created:
Running "concat:dist" (concat) task
File "public/js/combo.js" created.
Running "uglify:dist" (uglify) task
File "public/js/combo.min.js" created.
Running "less:compile" (less) task
App runnning on http://localhost:3000
File public/css/application.css created.
Running "watch" task
Waiting...
But, if I make a modification in my *.less files:
OK
>> File "src\css\application.less" changed.
Running "concat:dist" (concat) task
Completed in 2.039s at Tue Nov 12 2013 11:44:53 GMT-0500 (Eastern Standard Time) - Waiting...
So, modifying is detected by watch but my CSS file is not updated and I just can't figure why. I tried several contrib-less implementations and it keeps the same way. I guess I'm doing something wrong but what ?
PS: concat and uglify are working very well.

Related

I am running issue when trying to start a local network with Grunt.JS

Solved
I am trying to test an Admin template for my UI and I saw that the folder has a grunt.js file. I read that I need to run grunt connect to launch a local server to test the admin webapp. I am running into some issues. Below are some screen shots. Could someone provide some help?
Here is my grunt.js file code
'use strict';
module.exports = function(grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Configurable paths for the application
var app = require('./package.json');
var appConfig = {
name: app.name
};
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
pkg: appConfig,
watch: {
bower: {
files: ['bower.json'],
tasks: ['build']
},
scss: {
files: ['scss/**/*.scss'],
tasks: ['sass:dev']
},
html: {
files: ['app/{,*/}*.html'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
css: {
files: ['css/{,*/}*.css'],
options: {
livereload: '<%= connect.options.livereload %>'
}
},
js: {
files: ['js/{,*/}*.js'],
options: {
livereload: '<%= connect.options.livereload %>'
}
}
},
// The actual grunt server settings
// Project configuration.
pkg: grunt.file.readJSON('package.json'),
connect: {
uses_defaults: {}
},
templates: {
options: {
open: true,
middleware: function (connect) {
return [
connect().use('/bower_components', connect.static('./bower_components')),
connect().use('/lib', connect.static('./lib')),
connect().use('/img', connect.static('./img')),
connect().use('/css', connect.static('./css')),
connect().use('/js', connect.static('./js')),
connect().use('/app', connect.static('./app')),
connect.static('app'),
];
}
}
},
},
// Compiles scss files to css
sass: {
dist: {
options: { style: 'compressed', sourcemap: 'none' },
files: { 'css/amanda.min.css': 'scss/amanda.scss' }
},
dev: {
options: { style: 'expanded', sourcemap: 'none' },
files: {
'css/amanda.css': 'scss/amanda.scss'
}
}
},
// 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',
'js/**/*.js'
]
}
},
bower: {
install: {
options: {
cleanTargetDir: true,
layout: 'byComponent'
}
}
}
}),
grunt.registerTask('build', ['bower']);
grunt.loadNpmTasks('grunt-contrib-connect');
});
Here is my Package.json file
{
"name": "template",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"directories": {
"lib": "lib"
},
"dependencies": {
"grunt-http-server": "^2.1.0",
"grunt-serve": "^0.1.6"
},
"devDependencies": {
"grun": "^0.2.0",
"grunt": "^1.0.3",
"grunt-contrib-connect": "^1.0.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Also, I am getting this error in PowerShell:
PS C:\Users\DN1\Desktop\Envision WebApp\template> grunt connect
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: missing ) after argument list
Warning: Task "connect" not found. Use --force to continue.
Aborted due to warnings.
PS C:\Users\DN1\Desktop\Envision WebApp\template>
Here is a screen shot of my entire folder:
enter image description here

Grunt not compiling sass

I am working with an old project which uses grunt as a build tool, I had to install newer version of node-sass since to be able to rebuild node-sass. Now when I am trying to make changes in sass files, and run grunt I don't that anything has compiled. This is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
outputStyle: 'compressed',
sourceComments: 'none'
},
files: {
'css/app.css': 'scss/app.scss'
}
},
dev: {
options: {
outputStyle: 'expanded',
sourceComments: 'map',
sourceMap: 'app.css.map'
},
files: {
'css/app.css': 'scss/app.scss'
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'assets/scss/**/*.scss',
tasks: ['sass:dev']
},
css: {
files: ['assets/css/*.css'],
tasks: [],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass:dist']);
grunt.registerTask('default', ['sass:dev', 'watch']);
}
How can I fix this?
Looks like your path is wrong in your SASS task.
Replace:
'scss/app.scss'
with
'assets/scss/app.scss'

How can i get jade template to compile automatically in visual studio on save operation?

Could anyone post some basic steps on how to get *.html files to compile to *.jade files on file change / save operation in Visual Studio?
I have installed nodetools, web essentials. Syntax highlighting seems to work, but creating a .jade file does nothing. I think there is a missing step somewhere.
Do I have to use something like grunt-contrib-jade with a task?
Visual Studio 2015: After fiddling around a lot the answer i have is as follows:
Install node
Install NodeTools for visual studio
Run: npm install jade (install jade)
Run: npm install -g grunt-cli (install grunt)
Run: npm install bower
Create the below package.json file
Package.json : as follows
{
"name": "myapp",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-jade": "0.15.0",
"grunt-contrib-watch": "0.6.1"
}
}
7) Create the following grunt.js file
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
data: {
debug: true,
timestamp: "<%= new Date().getTime() %>"
}
},
files: [{
expand: true,
src: '**/*.jade',
ext : '.html'
}]
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'Scripts/bootstrap.js',
dest: 'Scripts/build/bootstrap.min.js'
}
},
watch: {
jade: {
files: '**/*.jade',
tasks: ['jade:watch'],
options: {
spawn: false
}
}
}
});
grunt.event.on('watch', function (action, filepath) {
if (filepath.indexOf('.jade') === -1) return;
var file = {};
var destfile = filepath.replace('.jade', '.html');
file[destfile] = filepath
grunt.config('jade.watch.files', file);
});
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
Open Task Explorer and then make sure you add/bind the task "watch" to project open.

Getting started on minifying CSS/SCSS with Grunt?

After inheriting a project, I've found the developer was using SCSS and Grunt to Minify his code. I'm new to both, but noticed I had to install grunt-cli locally. I've done so and need to make some edits to the style sheets, but am still working through how to get the scss to minify after making changes.
The structure of the grunt/scss area is:
_ (root folder)
_/css
_/grunt
_/img
_/inc
_/img
_/js
_/misc
_/sass
Inside _/grunt is:
gruntfile.js
npm-debug.log
package.json
Steveax helped me figure our that I was missing the local grunt setup:
npm install
I've found the SCSS files inside the _/scss folder and am comfortable editing them for the purposes of updating styles; however, after saving one I've noticed that they don't automatically update the minified css in the _/css folder, and am left looking through the files and documentation for a solution. I think an experienced eye will know what command I've missed.
Here is an example of an scss file, _/sass/common.scss, I'd like to be able to save and replace the css equivalent, _/css/common.css
EDIT: Per the help of Robert Levy (below), it seems I just need to run Grunt after making changes.
(x-See edit above) Do I simply run uglify from the _ directory?
uglify /sass/common.scss -o /css/common.css -p 1
Inside of package.json is:
{
"name": "exampletheme.com",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.3.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-imagemin": "^0.5.0",
"grunt-contrib-watch": "^0.6.0",
"grunt-contrib-compass": "^0.7.2",
"grunt-contrib-sass": "^0.7.3"
}
}
Inside of _/grunt/gruntfile.js is:
module.exports = function(grunt) {
// All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// Configuration for concatinating files goes here.
dist: {
src: [
'../js/libs/owl.carousel.js',
'../js/libs/jquery.actual.js',
'../js/libs/chosen.jquery.js',
'../js/libs/jquery.parallax.js',
'../js/src/common.js'
],
dest: '../js/pro/global.js',
},
},
uglify: {
build: {
src: '../js/pro/global.js',
dest: '../js/pro/global.min.js',
},
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: '../img/src/',
src: ['**/*.{png,jpg,gif}'],
dest: '../img/pro/'
}]
}
},
compass: {
dev: {
options: {
sassDir: '../sass',
cssDir: '../css',
fontsDir: '../fonts',
imagesDir: '../img/',
images: '../img/',
javascriptsDir: '../js/pro',
//environment: 'development',
outputStyle: 'compressed',
relativeAssets: false,
httpPath: '.',
}
},
},
watch: {
scripts: {
files: ['../js/**/**.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
images: {
files: ['../img/src/**.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
compass: {
files: ['../**/*.{scss,sass}'],
tasks: ['compass:dev'],
}
},
svgstore: {
defaults: {
options: {
prefix : 'icon-',
},
files: {
'../img/svg-defs.svg': ['../img/svg/*.svg']
}
}
},
});
// Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-svgstore');
// Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', /*'imagemin',*/ 'compass', 'svgstore', 'watch']);
};
just run grunt and it will invoke the default task which you can see in the last line of your gruntfile.js will in turn run concat, uglify, compass, svgstore, and watch.
compass is the one which is compiling the scss and minifying it.
the watch task is interesting because it tells grunt to continue running, keep an eye on your files, and recompile when things change.

How do I automate the task of compiling front-end frameworks like Twitter Bootstrap in my Node.js project?

How do I automate the task of compiling Twitter Bootstrap in my Node.js project?
I'm editing the LESS files that compile into a custom build of Bootstrap for my Node.js project, so I can't just use the online customizer or the pre-compiled JavaScript/CSS distribution.
How do I use something like Grunt or Bower to automate the process of building and compiling the Twitter Bootstrap front-end framework into my project from source?
Is there a package manager for front-end libraries and frameworks?
I'm using Grunt to compile my LESS. Here are the dependencies which you have to add to your package.json:
"devDependencies": {
"grunt": "0.4.1",
"grunt-contrib-concat": "0.3.0",
"grunt-contrib-watch": "0.4.4",
"assemble-less": "0.4.8"
}
And here is how my Gruntfile.js looks like:
module.exports = function(grunt) {
grunt.initConfig({
less: {
project: {
options: {
paths: ['src/css/less'],
yuicompress: true
},
src: ['src/css/less/index.less'],
dest: 'src/css/styles.css'
}
},
watch: {
css: {
files: ['src/css/less/**/*.less'],
tasks: ['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('assemble-less');
// grunt.registerTask('default', ['concat', 'less']);
grunt.registerTask('default', ['less', 'watch']);
}
And I simply type grunt before to start working. It run a watcher and compiles my less files once something changes.
Edit:
There is also https://github.com/emberfeather/less.js-middleware but you need to add the compilation to the app's flow. This means that you will compile the less files during the run of the nodejs process. This will happen only once and if you make changes in some of the files you will not see the result. Of course you may want to compile on every request, but this will decrease the performance of your app. So, you will end up with some kind of a watcher and compiler. Exactly what Grunt is doing. If you don't want to run grunt every time you may add it to your boot scripts (or startup things under windows).
Depending on your arrangement, you may want to just look into less-middleware. It will compile your LESS into CSS on the fly in development, and in production will do it the first time the CSS is requested, and then serve up the CSS instead of recompiling it every time. Plenty of configuration examples at the included link.
I dont have the settings on hand for grunt-bootstrap and npmjs is offline right now for some reason, try this link for the settings https://npmjs.org/package/grunt-bootstrap
im using the latest version of grunt-bootstrap and grunt-contrib-less like this;
package.json
"devDependencies": {
"grunt": "~0.4.2",
"grunt-cli": "~0.1.11",
"grunt-bootstrap": "~0.1.0",
"grunt-contrib-jade": "~0.8.0",
"grunt-contrib-less": "~0.8.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-watch": "~0.5.3"
//others here
}
Gruntfile.JS less: entry
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
globals: {
require: true,
define: true,
requirejs: true,
describe: true,
expect: true,
it: true
},
// https://leanpub.com/grunt/read #see 'module' is not defined
node: true
},
// https://leanpub.com/grunt/read #see 'module' is not defined
all: [
'Gruntfile.js',
'src/app/*.js',
'src/config.js',
'tests/app/*.js'
]
},
uglify: {
options: {
banner: '*//*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> *//*\n'
},
build: {
src: 'src/app/<%= pkg.name %>.js',
dest: 'build/app/<%= pkg.name %>.min.js'
}
},
// Run jshint any time a file is added
watch: {
scripts: {
files: [
'Gruntfile.js',
'src/app/*.js',
'tests/app/*.js'
],
tasks: ['jshint'],
options: {
/**
* If you need to dynamically modify your config, the spawn option must be disabled to keep the watch
* running under the same context.
*/
spawn: false
}
},
css: {
files: ['src/assets/css/*.less'],
tasks: ['less']
}
},
less: {
development: {
options: {
paths: ["src/assets/css"],
compress: true,
report: 'gzip',
cleancss: true,
ieCompat: true,
strictImports: true
//dumpLineNumbers
},
files: [{
expand: true,
cwd: "src/assets/css",
src: ['*.less'],
dest: 'build/assets/css',
ext: '.css'
}]
}
/*
production: {
options: {
cleancss: true
},
files: {
}
}*/
},
jade: {
compile: {
options: {
//client: false,
pretty: true,
data: {
debug: false
}
},
files: [ {
cwd: "src/app/views",
src: "**/*.jade",
dest: "build/templates",
expand: true,
ext: ".html"
} ]
}
}
});
// Load task(s)
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-bootstrap');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register task(s).
grunt.registerTask('default', [
'jshint',
'uglify',
'less',
'jade',
'bootstrap'
]);
grunt.registerTask('dev', [
'watch'
]);
};
Edit: i found this once again, https://github.com/jgallen23/grunt-bootstrap
i knew it was somewhere out there. there is some of your bootstrap config options your probably looking for that you need to add to the gruntfile.js to complete your task.. Enjoy

Resources