Compiling SASS files using Grunt creates an unnecessary folder - javascript

So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out.
Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder:
This is how it looks:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
files:['sass/*.scss'],
task:['sass']
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: '',
src: ['sass/*.scss'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
And this is how my folder looks after I run the task:
/SASS/somefile.scss
/CSS/SASS/somefile.css
The SASS folder it should not be there, the result i expect is:
/SASS/somefile.scss
/CSS/somefile.css
Thanks in advance!

The problem is due to your parameters for building the files object dynamically. You need to set the cwd parameter: "All src matches are relative to (but don't include) this path."
files: [{
expand: true,
cwd: 'sass/',
src: '*.scss',
dest: 'css/',
ext: '.css'
}]

Create a SASS folder under your CSS folder. Your somefile.scss file move into SASS folder then run.
like as :
CSS/
SASS/somefile.scss

Related

Error: ENOENT in Grunt uglify task

I have the following gruntfile.js. Using grunt-contrib-concat and grunt-contrib-uglify together.
This is an extention of a developement asked #Dynamic Mapping and Concat with Grunt Uglify
I use banner in the uglify task to reference a file created in the concat task.
module.exports = function(grunt){
// Configure task(s)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// setup concats
concat: {
options: {
separator: ';\n',
},
dev: {
files: [{
src: [
'sports.js',
'salon.js',
'offRoad.js',
],
dest: 'src/js/concat/car-dev.js'
}],
},
},
// setup uglify task
// this will produce a car js file (which includes car-dev.js) for every car js file located within scr/js/cars/
uglify: {
// dev - use in development mode, global overrides section
dev: {
options: {
// include concat dev.js
banner: grunt.file.read('src/js/concat/car-dev.js'),
beautify: true,
mangle: false,
compress: false,
preserveComments: 'all'
},
files: [{
expand: true,
cwd: 'src/js/cars/',
src: '*.js',
dest: 'javascript/dev',
ext: '.dev.js',
extDot: 'first'
}],
},
},
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
// Register task(s)
grunt.registerTask('default',
'concat:dev'
'uglify:dev'
]);
};
My issue is that if src/js/concat/car-dev.js doesn't exist, I get the following error:
Error: Unable to read "src/js/concat/car-dev.js" file <Error code: ENOENT).
If I create an empty file #src/js/concat/car-dev.js the grunt command works fine.
However this is not always possible. I want uglify to reference the car-dev.js file even if it doesn't exist. What I'm looking for is someway to reference the grunt->concat->dev->files->dest file.
I've tried adding the following
banner: grunt.file.read(grunt.concat.dev.files.dest),
and
banner: grunt.concat.dev.files.dest
but neither work. Is this possible?
This is not a task dependency issue - the error gets thrown before any tasks are run because banner: src/js/concat/car-dev.js does not exist.
Any help - much appreciated.

Configure grunt.js to minify files one by one in bower folder

I have the dependencies of the application in bower_components, some of the dependencies don't have a minified version so I'd like to create a task creates a minified copy of the file version in the same place where the file is located like:
bower_components
lib1
lib1.js
lib1.min.js <- create this file if doesn't exist
lib2
lib2.js
lib2.min.js <- create this file in it's own lib2 folder
lib3
lib3.js
lib3.min.js <- and so on...
This is my grunt Config so far:
uglify: {
dev: {
files:[
{
expand: true,
src: 'bower_components/modernizr/modernizr.js',
dest: '/',
ext:'.min.js'
}, {
expand: true,
src: 'bower_components/angular-facebook/lin/angular-facebook.js',
dest: '/',
ext: '.min.js'
}]
},
main: {
src: 'temp/app.min.js',
dest:'dist/app.min.js'
}
}
the Grunt task says that copied modernizr to it's own folder but when I look at it, the file is not there and after the first file Grunt passes to the next task and ignores the 'second' file in the array.
I was just testing this obviously I'd like to implement a way that grunt scan all the dependencies in bower_components automatically.
btw, I don't mind to change the task to any other library.
the / in your dest-option means the root path (were your gruntfile resides). just delete the dest-option or put an empty string there.
important: this just works with the expand-option set!
{
expand: true,
src: 'bower_components/modernizr/modernizr.js',
ext:'.min.js'
}
Edit:
for scanning all folders an minimizing all js files do it like this (note the second argument in src to not minify files which are already minified):
{
expand: true,
src: ['bower_components/**/*.js', '!bower_components/**/*.min.js'],
ext:'.min.js'
}

grunt copy moving build folder outside of project

Hello I have a file structure that looks like this,
|-App
|------|src
|----------|js
|----------|img
|----------|css
|----------|less
|----------|tpl
|----------|index.php
|- Gruntfile.js (withing parent app folder)
|- package.json (withing parent app folder)
What I am trying to do is move all the contents of the src folder into a build folder, the build folder gets created but outside of the App folder, and I don't really understand why, secondly when it does copy the src folder it copies the actual src folder, I want to copy all its children but no the parent src folder, and thirdly the copy ignores the index.php file why? Below is my current Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
copy: {
build: {
cwd: '.',
src: ['src/*/*'],
dest: '../build',
expand: true
}
},
clean: {
build: {
cwd: '.',
src: ['build']
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('move', 'Moves the project to the build folder', ['copy', 'clean']);
};
Your paths are wrong. Change the build options to:
build: {
cwd: '.',
src: ['src/**/*'],
dest: './build',
expand: true
}
../build meant the build directory was created in the parent dir (.. is the parent dir)
src/**/* means recursively copy all files and files of descendent folders.

Compiling Jade with Grunt to a specific directory

I'm trying to compile Jade files to HTML and put them in a directory.
Currently when I compile, the created HTML files are going into the right directory but they are within a created directory called jade.
Here is my directory structure:
jade
html
But after compile it looks like this:
jade
html/jade
Ideally I just want the HTML files to go into the html directory and not within a jade directory.
Here is the relevant part of my gruntfile:
jade: {
compile: {
files: [{
expand: true,
src: ['jade/**/*.jade'],
dest: 'html/',
ext: '.html'
}]
}
}
Output structure mirrors the src option. Try the cwd option.
Refer to: http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
Example:
jade: {
compile: {
files: [{
expand: true,
cwd: 'jade/',
src: ['**/*.jade'],
dest: 'html/',
ext: '.html'
}]
}
}

Concat a single file to every file in a directory using grunt

Using Grunt, I want to concat one file to all of the files in a build directory. The purpose of doing so is to append (or potentially prepend) IE specific CSS files to a build CSS file.
To task this:
build/
file1.css
file2.css
file3.css
And create this:
build/
file1.css
file1.ie.css
file2.css
file2.ie.css
file3.css
file3.ie.css
I thought that the expand option might be what I was looking for but I can't figure out how to get it to do what I want.
Try the banner option in grunt-contrib-concat:
concat: {
dist: {
options: {
banner: '/* IE specific things here */',
},
expand: true,
cwd: 'build/',
ext: '.ie.css',
src: ['**/*.css'],
dest: 'build/',
},
},

Categories