I am trying to watch an entire folder for sass changes..
The directory is follows:
creatives/lp/folder/style.scss
creatives/lp/folder1/style.scss
And here is my grunt file
sass: {
dist: {
files: {
'creatives/lp/**/test.css' : 'creatives/lp/**/test.scss'
},
options: {
style: 'compressed',
},
}
},
Grunt is able to see sass changes but writes out the compiled CSS to:
creatives/lp/**/style.css
The CSS should be saved in the same folder as the source SCSS file...
your question is not so clear for me
- if you want multiple files to compile to one file with grunt you can make the files as array format
dist: {
files: [{
src: ['creatives/lp/folder/*.scss'],
dest: 'creatives/lp/folder/style.css',
}]
}
If you want the css file should be created in the same folder as scss file, you can use the following snippet.
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
expand: true,
cwd: 'creatives',
src: ['**/*.scss'],
dest:'creatives',
ext:'.css'
}]
}
}
I hope it solves your problem.
Related
I am new to grunt. Can anybody tell me how to configure grunt in .NET 6 MVC project?
I want that all the JavaScript files located at "wwwroot\lib\custom\js" folder should get minify and go at this location "wwwroot\js\minified\scripts"
I do not want to bundle everything into one file rather I am looking to minify these files separately like this:
Files at this location wwwroot\js\minified\scripts will look like below:
product.min.js
common-methods.min.js
I would also like to minify my CSS files and put at this "wwwroot\js\minified\css" location. I found this link helpful but somehow it is not working for me. Also that would be much helpful, if somebody can tell me how to configure "grunt-contrib-watch" as well?
Here is my package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"grunt": "1.5.3",
"grunt-contrib-clean": "2.0.1",
"grunt-contrib-jshint": "3.2.0",
"grunt-contrib-concat": "2.1.0",
"grunt-contrib-uglify": "5.2.2",
"grunt-contrib-watch": "1.1.0"
}
}
and my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
options: {
compress: true
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask("default", ["uglify"]);
}
Can anybody help me configure this?
Your gruntfile.js will look this
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
uglify: {
minifyJs: {
files: [{
expand: true,
cwd: 'wwwroot/lib/custom/js/',
src: ['**/*.js'],
dest: 'wwwroot/js/minified/scripts/',
ext: '.min.js',
extDot: 'first'
},],
},
},
cssmin: {
webStyles: {
files: [{
expand: true,
cwd: 'wwwroot/lib/custom/css/',
src: ['**/*.css'],
dest: 'wwwroot/js/minified/css/',
ext: '.min.css'
}]
}
},
watch: {
minifyJs: {
expand: true,
files: "wwwroot/lib/custom/js/**/*.js",
tasks: ["uglify:minifyJs"]
},
webStyles: {
expand: true,
files: "wwwroot/lib/custom/css/**/*.css",
tasks: ["cssmin:webStyles"]
},
options: {
spawn: false,
event: ['all']
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask("default", ["watch"]);
}
You can refer the documentation for more information.
I'm new to Grunt and am following this tutorial.
I'm having a heck of a time trying to get Grunt to compile Sass. I keep getting the following when I run grunt sass:
Loading "sass.js" tasks...ERROR
>> SyntaxError: Unexpected token (
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
node: v6.11.0,
npm: v6.4.1,
grunt cli: v1.3.2
package.json:
{
"name": "yb",
"version": "1.0.0",
"description": "yb site build",
"main": "src/js/main.js",
"dependencies": {},
"devDependencies": {
"grunt": "^1.0.3",
"grunt-contrib-concat": "^1.0.1",
"grunt-sass": "^3.0.2",
"node-sass": "^4.10.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Scott",
"license": "ISC"
}
Gruntfile.js
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
concat: {
js: {
src: ['src/**/*.js'],
dest: 'assets/js/main.js'
},
css: {
src: ['src/**/*.css'],
dest: 'assets/css/main.css'
}
},
sass: {
build: {
files: [{
src: 'src/sass/test.scss',
dest: 'assets/css/test.css'
}]
}
}
});
// Load Plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
// Register Tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
};
The grunt-sass docs give a different configuration (which I've also tried), but I still can't get it to compile.
As far as I know, everything is installed. I can't find where I'm going off the rails here. Any thoughts?
check ruby with ruby -v (install [ruby][1] )
Install Sass with sudo gem install sass (install [sass][2] )
setting for Grunt Tasks & run grunt convert-sass
// Load Grunt
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Tasks
concat: {
js: {
src: ['src/**/*.js'],
dest: 'assets/js/main.js'
},
css: {
src: ['src/**/*.css'],
dest: 'assets/css/main.css'
}
},
sass: {
dist: {
options: {
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'src/sass',
src: ['**/*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
}
});
// Load plugins
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
// Register Tasks
grunt.registerTask('concat-js', ['concat:js']);
grunt.registerTask('concat-css', ['concat:css']);
grunt.registerTask('convert-sass', 'sass');
};
I am trying to set up grunt to automatically compile my SCSS to CSS.
I started by installing Sass using Ruby, then I installed Grunt and I have it running with this gruntfile.js:
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'mysite/static/css/grunt.css' : 'mysite/static/sass/_video.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
When I run the command:
grunt watch
Grunt runs and watches for any changes in my file and it will see the change, but never converts the SCSS to CSS.
dominic#dom-Inspiron-7559:~/Desktop/Projects/stemletics/stemletics/mysite$ grunt watch
Running "watch" task
Waiting...
>> File "mysite/static/sass/_video.scss" changed.
Running "sass:dist" (sass) task
Done.
Completed in 0.517s at Sun Oct 28 2018 22:36:47 GMT-0400 (EDT) - Waiting...
I am using this guide: http://ryanchristiani.com/getting-started-with-grunt-and-sass/
try below setting
grunt.initConfig({
sass: {
dev: {
src: ['mysite/static/sass/_video.scss'],
dest: 'mysite/static/css/grunt.css',
},
},
watch: {
sass: {
files: ['mysite/static/sass/*.scss'],
tasks: ['sass'],
},
livereload: {
options: { livereload: true },
files: ['mysite/**/*'],
},
},
});
I'm using generator-zf5 to generate my Yeoman app. When installing I said Yes to including Compass in my project, but I can't see the Compass files in my project files. Am I doing something wrong. Do I need to include this myself. If so, how?
I uninstalled all Sass gems and Compass and reinstalled with gem install compass --version 0.12.7 and am now using Compass 0.12.7 and Sass 3.2.19 (Media Mark).
I then installed Compass locally using:
npm install grunt-contrib-compass --save-dev
But when I add #include border-radius(25px); to my CSS, I keep getting an error. Can anyone help me? I'm still trying to rap my head around a lot of these terminal processes.
Thanks in advance!
it is resolved now in the generator-zf5 github issue tracker: https://github.com/juliancwirko/generator-zf5/issues/26
Have you added the require option in your gruntfile?
See:
http://ericdfields.com/post/installing-compass-frameworks-in-a-yeoman-project
Make sure you have the proper 'watch' block in your initConfig:
grunt.initConfig({
// Project settings
yeoman: appConfig,
// Watches files for changes and runs tasks based on the changed files
watch: {
...
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
}, ...
And also the compass definition below the watch:
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
And lastly, the concurrent tasks definition:
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'compass:server'
],
test: [
'compass'
],
dist: [
'compass:dist',
'imagemin',
'svgmin'
]
},
I'm using grunt.js for the first time and I'm having trouble setting up a sass watch. I've successfully installed node.js and grunt and I was able to get it concatinating and minifying all my javascript files into one file. Then I moved onto trying to get it to watch and compile my sass files and I can't figure out why I keep getting this error in my command line (clearly there is a syntax error, but I don't know where it is?
here is my command line error:
Mandy at MandysMac in ~/Desktop/Dropbox/WEBSITES/Portfolio/wp-content/themes/mandy_made_this_theme on master*
$ grunt
/Users/Mandy/Desktop/Dropbox/WEBSITES/Portfolio/wp-content/themes/mandy_made_this_theme/Gruntfile.js:27
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Here is my package.json file:
{
"name": "mandy-made-this-theme",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-sass": "^0.7.3",
"grunt-contrib-watch": "^0.6.1"
}
}
And most importantly, Here is my grunt file:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: ['working/jquery-2.1.0.min.js, working/jquery-ui-1.10.4.custom.min.js', 'working/jquery.smooth-scroll.min.js', 'working/isotope.pkgd.min.js', 'working/scripts.js'], //input
dest: 'scripts/build/scripts.min.js' //output
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'style.css': 'sass/style.scss'
}
}
}
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
options: {
livereload: true,
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default',['uglify', 'sass', 'watch']);
}
You are missing a comma after sass object
'style.css': 'sass/style.scss'
}
}
}, // added , here
watch: {
css: {
files: '**/*.scss',