I am just starting to use Autoprefixer in my coding process. I am using grunt-autoprefixer for it. https://github.com/nDmitry/grunt-autoprefixer
In my gruntfile.js
sass: {
dist: {
options: {
sourcemap: true
},
files:{
'css/style.css': 'sass/style.scss'
}
}
},
autoprefixer: {
dist: {
options: {
map: true
},
files:{
'build/style.css': 'css/style.css'
}
}
},
The sourcemap gets generated. However when I view it in Chrome, it is still showing .css instead of .scss?
Here are the sourcemaps.
https://drive.google.com/folderview?id=0B-PvLw2M9kBZZmRkMk9tekh6QWc&usp=sharing
I have identified that the problem is because of Google Drive.
I am hosting all my code on Google Drive and do my coding straight onto it.
There is some caching and syncing problem.
So in terms of setup, everything is correct.
Related
I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter what .scss files I edit, it doesn't affect the required .css file. The developers that originally built the site aren't here anymore.
The changes I make either affect file.css or file2.css, and I need to reach file.expanded.css, but there's no mention of this file in the Gruntfile, so it was either removed, or it's being compiled in another way. Obviously, I'm avoiding editing it directly. I'm just unsure if I have enough to figure this out.
In case it helps, here's the Gruntfile:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
build: {
files: {
'assets/css/file2.css': 'assets/sass/folder/file2.sass'
}
}
},
autoprefixer: {
build: {
src: 'assets/css/file.css',
dest: 'assets/css/file.css'
}
},
watch: {
css: {
files: ['assets/sass/**'],
tasks: ['buildcss']
}
},
// Browsersync
browserSync: {
dev: {
bsFiles: {
src: [
'assets/css/*.css',
'assets/images/*',
'assets/scripts/*.js',
'**/*.html'
]
},
options: {
watchTask: true,
proxy: "site.dev:8888",
}
}
},
});
grunt.registerTask('default', ['browserSync', 'watch']);
grunt.registerTask('buildcss', ['sass', 'autoprefixer']);
};
You should install a Grunt task for source maps and recompile your CSS. I personally use Gulp so, I'm unsure what the best solution for Grunt might be, but it's a similar set up. When your CSS is compiled with source maps, you'll be able to pinpoint with your inspector where in which partial or SASS file the style declarations are coming from.
http://thesassway.com/intermediate/using-source-maps-with-sass
I want grunt to compile sass every time grunt is executed if my Sass files haven't changed. Sometimes the watcher fails to detect if the compiled result is different from the existing CSS file, and the only way to force it to compile is by editing one of the Sass files.
Grunt file:
/**
* #file
*/
module.exports = function(grunt) {
// This is where we configure each task that we'd like to run.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
// This is where we set up all the tasks we'd like grunt to watch for changes.
scripts: {
files: ['js/source/{,*/}*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
images: {
files: ['images/source/{,*/}*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
vector: {
files: ['images/source/{,*/}*.svg'],
tasks: ['svgmin'],
options: {
spawn: false,
}
},
css: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass']
}
},
uglify: {
// This is for minifying all of our scripts.
options: {
sourceMap: true,
mangle: false
},
my_target: {
files: [{
expand: true,
cwd: 'js/source',
src: '{,*/}*.js',
dest: 'js/build'
}]
}
},
imagemin: {
// This will optimize all of our images for the web.
dynamic: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.{png,jpg,gif}' ],
dest: 'images/optimized/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
dist: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.svg' ],
dest: 'images/optimized/'
}]
}
},
sass: {
// This will compile all of our sass files
// Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
options: {
sourceMap: true,
// This controls the compiled css and can be changed to nested, compact or compressed.
outputStyle: 'expanded',
precision: 5
},
dist: {
files: {
'css/base/base.css': 'sass/base/base.sass',
'css/components/components.css': 'sass/components/components.sass',
'css/components/tabs.css': 'sass/components/tabs.sass',
'css/components/messages.css': 'sass/components/messages.sass',
'css/layout/layout.css': 'sass/layout/layout.sass',
'css/theme/theme.css': 'sass/theme/theme.sass',
'css/theme/print.css': 'sass/theme/print.sass'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'css/**/*.css',
'templates/{,*/}*.twig',
'images/optimized/{,*/}*.{png,jpg,gif,svg}',
'js/build/{,*/}*.js',
'*.theme'
]
},
options: {
watchTask: true,
// Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
injectChanges: false
}
}
},
});
// This is where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// Now that we've loaded the package.json and the node_modules we set the base path
// for the actual execution of the tasks
// grunt.file.setBase('/')
// This is where we tell Grunt what to do when we type "grunt" into the terminal.
// Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
// you can type 'grunt watch' to automatically track your files for changes.
grunt.registerTask('default', ['browserSync','watch']);
};
grunt.registerTask('default', [
'browserSync',
'sass',
'watch',
]);
Simply register sass as a task to run when you type grunt.
If you do this and the sass files are still not giving you the results you want, then you need to revisit your sass task and make sure you're piping the files where you want them to go.
More cool options:
newer: When you run grunt you want sass to compile to CSS only if there is a difference between the new CSS and the old. In that case, try grunt-newer. Appending newer:taskyouwanttorun:option will work.
watch:sass: You want sass to compile during a watch based on something besides changing one of the sass files. Easy, just set up a watch task that looks for whatever file you want to modify, image/javascript/html/whatever and set the task as sass
I find Web Essentials autoprefixer not auto enough - I need to manually say it to add prefixes. Also it doesn't offer me prefixes when I'm writing .less or .scss.
Is there any extension or option to make it automatically add prefixes on css compilation from .less or .scss stage?
I've tried Web Compiler extension, but it doesn't support prefixing for sass, and says that it supports prefixing for less, but I've tried enabling autoprefix in compilerconfig.json while writing .less and it didn't add anything.
Is there something for visual studio? Or maybe I should dump it and use some editor + gulp?
I'm sure there will be an extension out there but it isn't too much work to create a Grunt/Gulp file to do your compiling for you. Task Runner Explorer will then manage the running of the file. Writing your own will give you the control and the flexibility that an extension will not.
Here is a sample using Grunt, taken from my post on the subject Getting started with Grunt, SASS and Task Runner Explorer
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true, // Create source map
outputStyle: 'compressed' // Minify output
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "sass", // The startup directory
src: ["**/*.scss"], // Source files
dest: "stylesheets", // Destination
ext: ".css" // File extension
}
]
}
},
// Autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions'],
map: true // Update source map (creates one if it can't find an existing map)
},
// Prefix all files
multiple_files: {
src: 'stylesheets/**/*.css'
},
},
// Watch
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'autoprefixer'],
options: {
spawn: false
}
}
}
});
grunt.registerTask('dev', ['watch']);
grunt.registerTask('prod', ['sass', 'autoprefixer']);
};
I started using gruntjs today. Created all the required files etc.
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: "\n"
},
dist: {
src: ['js/lib/*.js','js/main.js'],
dest: 'js/script.js'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: { // Dictionary of files
'css/style.css': 'css/style.scss' // 'destination': 'source'
}
}
},
uglify: {
options: {
sourceMap : true,
mangle : false
},
my_target: {
files: {
'js/script.min.js': ['js/script.js']
}
}
},
watch: {
css: {
files: ['css/*.scss'],
tasks: ['sass']
},
scripts: {
files: ['js/lib/*.js','js/youtube.js','js/main.js'],
tasks: ['concat', 'uglify']
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['watch']);
};
and it works fine. But there is one little thing in my PHPstorm (running under osx):
GruntJS really makes the changes but they are not uploaded to the server I'm mapped to. I have the Automatic Upload and 'Upload External Changes' checked but still, nothing happens.
Could you somehow help me?
Thanks in advance!
P.s While using the PHPStorm file watchers (scss watcher), the 'Upload External Changes' was working and the files were uploading to server, but after switching to GruntJS the problem occurred.
BTW, File > Synchronize solves the problem, as it reloads the files and then the 'Upload external changes' works, but that's not a very good solution as it's not automatic.
Also, switching the window probably makes PHPStorm synchronize files and this also helps.
Anyway, I'm in search of better solution..
I was using older (v8) version of PHPStorm.
In PHPStorm 10 Problem is solved !!!
I'm using Grunt 0.4.5 with these dependencies in my project:
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-sass": "~0.8.1"
I've just noticed that grunt-autoprefixer didn't get added to my package.json file. Is that because it doesn't have the grunt-contrib prefix? Anyway, Source Maps work for me when I remove autoprefixer from my watch task, but as soon as I add it in again the comment at the very end of the compiled css file gets removed.
This is my autoprefixer config:
autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
single_file: {
options: {
// Target-specific options go here.
},
src: 'library/css/style.css',
dest: 'library/css/style.css'
},
sourcemap: {
options: {
map: true
}
},
},
My Sass config looks like this:
sass: {
dist: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: {
'library/css/style.css': 'library/scss/style.scss'
}
}
},
and here's my watch task:
watch: {
options: {
livereload: true,
},
scripts: {
files: ['library/js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
css: {
files: ['library/scss/*.scss'],
tasks: ['sass', 'autoprefixer'],
sourceComments: 'normal',
options: {
spawn: false,
}
},
page: {
files: ['*.php', '*.html']
}
}
I don't get why autoprefixer has to interfere with the source map at all to be honest, I tried using false instead of true, specifying the sourcemap manually as per the example in the grunt-autoprefixer repo, but whatever I do the comment - /*# sourceMappingURL=style.css.map */ gets stripped from the file and source maps don't work in chrome.
EDIT: Sorry, I just got it to work by using:
sourcemap: {
options: {
map: true
},
src: 'library/css/style.css',
dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
},
I'd be interested to know, for performance reasons, do I need to bother specifying a sourcemap option at all in the grunt-contrib-sass config now? It takes me about 2.4s to compile so every 0.1s counts!
Sorry, I just got it to work by using:
sourcemap: {
options: {
map: true
},
src: 'library/css/style.css',
dest: 'library/css/style.css' // -> dest/css/file.css, dest/css/file.css.map
},
I'd be interested to know, for performance reasons, do I need to bother specifying a sourcemap option at all in the grunt-contrib-sass config now? It takes me about 2.4s to compile so every 0.1s counts! I'll do some testing and see, as far as I can see it looks like source maps are generated by default now by sass, so I probably only need to specify this in autoprefixer
I found the following worked for me:
sass: {
options: {
sourceMap: true,
sourceMapEmbed: false
},
dist: {
files: {
'css/style.css': 'css/src/style.scss',
'css/debug.css': 'css/src/debug.scss',
}
}
},
autoprefixer: {
//prefix all files
multiple_files: {
expand: true,
flatten: true,
src: 'css/*.css',
dest: 'css/'
},
options: {
map: true,
annotation: false
}
},
Without specifying annotation: false, I found that autoprefixer always overwrote the /*# sourceMappingURL=style.css.map */ with a data-uri sourceMappingURL that would not work (my browser inspectors would not show the original .scss source).
I also found that using sourcemap as in the accepted answer does not work if you have multiple scss/css files. I believe sourcemap allows you to set a different set of options for each scss->css mapping, but I wanted the same settings for all of mine.
Hope this helps!