I have the following folder structure:
+ web
+ component
- component.js
- component.scss
- component.css
+ another
- another.js
- another.scss
- another.css
As you can see I compile every css into his component folder.
This is my configuration:
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: './',
src: ['web/**/*.scss'],
dest: './',
ext: '.css'
}]
}
},
watch: {
files: ["web/**/*.scss"],
tasks: ['sass'],
options : { spawn: false }
}
});
Everything works fine, but the problem is that every time a scss file is changed, it compiles ALL the scss in my web folder.
I want to compile only the changed scss.
I also tried installing grunt-newer and changing the watch configuration in:
watch: {
files: ["web/**/*.scss"],
tasks: ['newer:sass'],
options : { spawn: false }
}
But it doesn't compile anything now.
ps: I would like to avoid mapping every single file in the sass configuration (scss -> css) since the rule is the same for all the files (same name, same folder), and because I have tons of them.
ok, i was close.. i'll post the answer as well, it may help someone.
i had to remove options : { spawn: false }, so my config file now is like this:
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: './',
src: ['web/**/*.scss'],
dest: './',
ext: '.css'
}]
}
},
watch: {
files: ["web/**/*.scss"],
tasks: ['newer:sass']
}
});
Related
I am getting the error though all seems to be right in the code. Can someone help?
gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Setting up some base links
meta: {
basePath: '../'
},
//Reading package.json file
pkg: grunt.file.readJSON('package.json'),
// Concat Configuration
concat: {
options: {
separator: ';'
},
dist: {
src: ['<%= meta.basePath %>scripts/*.js'],
dest: '<%= meta.basePath %>scripts/concated.js'
}
},
// Uglify Configuration
uglify: {
build: {
src: ['<%= meta.basePath %>scripts/concated.js'],
dest: '<%= meta.basePath %>scripts/uglify.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat','grunt-contrib-uglify');
// Default task
grunt.registerTask('default', ['concat','uglify']);
};
ERROR
Already seen the links:
grunt uglify task failing
new to grunt - warning: task "concat, uglify" not found
However, "grunt concat" runs fine and provide results. No issues. But this uglify seems to create a lot of pain.
try this excerpt from http://gruntjs.com/configuring-task:
uglify: {
static_mappings: {
// Because these src-dest file mappings are manually specified, every
// time a new file is added or removed, the Gruntfile has to be updated.
files: [
{ src: 'lib/a.js', dest: 'build/a.min.js' },
{ src: 'lib/b.js', dest: 'build/b.min.js' },
{ src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js' },
{ src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js' },
]
}
}
I am new to Grunt and all its plugins, but I want to learn and setup some awesome front-end tools. With that said, I have been following the Grunt docs and some's similar issue with Grunt and Babel via Github, but I seem to keep getting the following traceback:
Running "babel:dist" (babel) task
Warning: Unable to write "dist" file (Error code: EISDIR). Use --force to continue.
Aborted due to warnings.
Any clearer explanation to this newbie would be HIGHLY appreciated. I'm new to programming in JS and setting up DevOps, so some helpful tips and best practices are encouraged.
Setup:
js_practice/ (Root Project)
|----package.json
All the distributions and packages
|---node_modules/
Server-Side (Node) support
|---es6/
| ------ test.js
|---dist/
Client (browser) support
|----public/
|---es6/ (this is within the public folder)
| ----- test2.js
|---dist/ (this is within the public folder)
Here is my current code:
Grunt file.js
module.exports = function(grunt) {
// All of your Grunt code must be specified inside this function!
// Setup configuration...
// Load tasks...
// Define tasks...
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
babel: {
options: {
sourceMap: true,
presets: ['babel-preset-es2015']
},
dist: {
files: [
// Node source
{
src: ['es6/**/*.js'],
dest: 'dist'},
// Browser source
{
src: ['public/es6/**/*.js'],
dest: 'public/dist'},
],
},
},
browserify: {
dist: {
options: {
transform: [["babelify", { "stage": 0 }]]
},
files: {
"build/bundle.js": "src/main.js"
}
}
},
jshint: {
scripts: {
src: ['scripts/**.js', 'lib/**.js']
},
tests: { // We can have more than one jshint task, this ones called `jshint:tests`
src: 'tests/**.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
},
scripts: {
expand: true,
cwd: 'scripts/',
src: '**.js',
dest: 'build/',
ext: '.min.js'
}
},
watch: {
scripts: {
files: ['**/*.js'],
tasks: ['jshint'],
},
styles: {
files: 'styles/**.less',
task: 'less:styles'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('default', ['babel','browserify','jshint']);
grunt.registerTask('build', ['jshint', 'uglify']);
};
Just expanding on what I said in the comments
Any clearer explanation to this newbie would be HIGHLY appreciated.
Nodejs is trying to write a file called dist, but produces an error because a directory with this name exists.
The cause of this is found in the babel task.
files: [{
src: ['es6/**/*.js'],
dest: 'dist'
},
// Browser source
{
src: ['public/es6/**/*.js'],
dest: 'public/dist'
}]
You have to tell Babel to take each file in es6/, transform them and place the new files in the dist/ folder. As it stand now, the transformer tries to create a file called dist. Rewriting it to
files: [{
expand: true,
cwd: 'es6/'
src: ['**/*.js'],
dest: 'dist/'
},
// Browser source
{
expand: true,
cwd: 'public/es6/'
src: ['**/*.js'],
dest: 'public/dist/'
}]
should yield a better result, but play around with it. Like I mentioned, I haven't used Grunt in a while. Take a look at the documentation on building the files object
And like I said in the comments, use jshint or other such tools (eslint is all the hype...) to keep your own code neat. Don't waste time by running a jshint task on lib files that you probably don't want to fix yourself anyway. And always run jshint on the source files, not files that are transformed by babel or browserify. It's just a tool to help you write better code, not some generator.
So i am trying to set up my first grunt application, but i am struggling with the watch task.
When I run the task watch looks like it is working when i change my sass files, but the css files are not updated, so it looks like it is not compiling.
I am wondering if i need to install something else, for me this is all new... and i am not sure if I understand, because it looks very simple but I just cant make it work.
So here is my code
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
options: {
livereload: true
},
files:['sass/**/*.scss'],
task:['sass']
},
css: {
files: ['css/*.css'],
tasks: []
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: 'sass',
src: ['*.scss', '*.sass'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
I think you want your livereload to be on the css files instead of scss. As it is the compiled file that you want to be reloaded and not the preprocessed (scss) file.
Example
watch:{
sass:{
files:['sass/**/*.scss'],
task:['sass']
},
css: {
options: {
livereload: true
},
files: ['css/*.css']
}
}
OWWWWW....
I just found the problem... it should have been "tasks" not "task", i wasted sooo much time, on finding this little thingy!
I have the following gruntfile.js code:
less: {
development: {
files: [{
expand: true,
cwd: 'assets/less',
src: ['*.less'],
dest: 'wwwroot/content/css/',
ext: '.css'
}]
}
},
watch: {
less: {
files: ["assets/less/*.less"],
task: ["less:development"]
}
};
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
When I run the watch task and make changes on any of my less files, it detected the changes in the less files:
File "assets\less\abc.less" changed.
But the problem is it is not updating my abc.css file. Does anyone know why is this and how to fix it? Thanks
Heh... just had another question with this issue, and it's the same problem:
watch: {
less: {
files: ["assets/less/*.less"],
tasks: ["less:development"] // <-- note that this is PLURAL! :)
}
}
I'm working on some automation tasks and I noticed that grunt.js and uglify module are not rewriting the minified file. They're appending a new version of code everytime I start grunt tasks.
module.exports = function(grunt) {
grunt.initConfig({
uglify : {
build : {
src : ['**/*.js', '!*.min.js'],
cwd : 'js/app/modules/',
dest : 'js/app/modules/',
expand : true,
ext : '.main.min.js',
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
What can I do to avoid it? I just want the newest version of code in the file.
I had the same problem with the following configuration for all files in subfolders to js/ (e.g. js/lib/*.js) :
build: {
expand: true,
cwd: 'js/',
src: ['**/*.js','!*.min.js'],
dest: 'js/',
ext: '.min.js',
}
You have to restrict more files, because if a file matches the src-option the content will be appended and not replaced - because it is "locked" i guess:
src: ['**/*.js','!**/*.min.js']
That should fix your problem.
Thanks SpazzMarticus! I user grunt-newer to run uglify with newer files only.
You can try this:
grunt.initConfig({
uglify: {
options: {
},
build: {
files: [{
expand: true,
cwd: 'public/js',
src: ['**/*.js','!**/*.min.js'],
dest: 'public/js',
ext: '.min.js'
}]
}
},
watch: {
options: {
livereload: true,
nospawn: true
},
scripts:{
files: ['public/js/**/*.js'],
tasks: ['newer:uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('yt', ['watch']);