I'm using LESS with Gulp. I'm also using the Autoprefixer plugin which adds all needed vendor prefixes based on Browserlist. This works pretty nice when creating all minified files for the final export.
My problem is: When I test the CSS in the developement environment using less.js there are no vendor prefixes added. It seems that the auto prefixer is only available for the cli. Is there a way to add vendor prefixes on the fly with less.js or another plug in? I've already tried to run prefixfree after less.js but without luck.
Just pipe a stream from gulp-less to autoprefixer, e.g.
gulp.task('styles', [], function () {
return gulp.src('less/*.less')
.pipe(gulplLss())
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('css/'));
}
gulp.task('watch', function () {
gulp.watch('less/*.less', 'styles');
}
(This is using autoprefixer via postcss tool which is now recommended way. Before deprecation it the autoprefixer line whould be: .pipe(autoprefixer()))
There is a pure frontend solution (if it is what you are looking for). Autoprefixer can run in browser environment. You don't have to run it as a Less plugin.
In estFiddle I run Autoprefixer after compiling Less into CSS and it works. (You can see source code here.)
Related
What is the best way of minify multiple css files into one?
The gulp task below causing two issues after the minification and concatenation:
bootstraps glyphicons that I use have disappeared.
some of my styles are broken. The task seems to have re-arranged the position of some styles, for instance .footer{...} was placed below html{...} but it is now above html{...}. How can i stop it from rearranging them?
gulpfile:
gulp.task('minify-css', function() {
return gulp.src([
'node_modules/bootstrap/dist/css/bootstrap.css',
'vendor/jquery-ui-1.12.1/jquery-ui.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.css',
'node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.css',
'css/style.css',
])
.pipe(sourcemaps.init())
.pipe(cleanCSS({debug: true}))
.pipe(sourcemaps.write())
.pipe(concat('bundle.min.css'))
.pipe(gulp.dest('dist'));
});
Any ideas?
I don't know if it help you but I think you could use SASS preprocessing by gulp-sass. There you could import all of your dependencies and let gulp-sass to minify the result. I have similar approach in my gulp devstack. SASS (libsass) can import *.css files, e.g. in your main.scss you can write
#import "path/to/file";
Note that without .css extension!
If you not familiar with SASS I recommend to give it a chance.
It's not a common solution but sometimes it helps. I make two min. bundles: 'head.bundle.min.css' and 'foot.bundle.min.css' just like you did. In head.bundle.min.css I collect styles which must be first. And finally I concatenated two min bundles in one.
Was wondering if it is possible to lint my sass code on the fly with grunt-sass? Right now, I'm trying to remove ruby altogether from a project and it uses grunt-scss-lint for linting (which uses sass via ruby).
Thanks for any info/pointers.
sass-lint
All Node Sass linter!
A Node-only Sass linter for both sass and scss syntax!
https://www.npmjs.com/package/sass-lint
Note: I never used it. But seems to be what you are looking for.
I have set up a gulpfile.js in my project. It's working pretty nicely mostly, except when it comes to generating source maps, especially for the LESS files it compiles to CSS.
I have put together a gist which contains all the files in my gulp setup. Please note that other than the gulp file.js itself, all the other files are inside a directory called tasks.
The problems I am having are that
I had to disable the autoprefixer in development because the source maps that were being generated were invalid as the autoprefixer modified the original CSS file after the source maps were generated. To compensate, I have added mixins that add the vendor prefixes during development, and I have to disable those for development and enable the autoprefixer for the production environment.
I am unable to generate a minified CSS file at all if I want source maps. The minification breaks the source maps.
Although I have LiveReload set up, and the associated browser plugins, I cannot get the CSS to get auto-injected into the page as I am making changes.
If anyone can help me structure my gulp file.js to work more efficiently and more effectively, I would appreciate it.
Again, my gulpfile.js and associated tasks are in this gist.
I had to disable the autoprefixer in development because the source maps that were being generated
The docs at https://www.npmjs.com/package/gulp-autoprefixer describe how to use the autoprefixer with gulp-sourcemaps:
gulp.task('default', function () {
return gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('all.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
The above create a new source map for all.css. So you should load the sourcemap generated by the less compiler first, see https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps
The docs of gulp-minify-css do not describe such an usage, but possible you can do:
gulp.task('minify-css', function() {
gulp.src('./static/css/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/'))
});
Notice that in most cases you minify only your code for production. Development code, which has source maps should not have to be minified.
Since version 2 of Less you can use plugins for the Less compiler. Also gulp-less allows you to use these plugins (programmatic) see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code
Documentation of gulp-less describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins. Notice that gulp-minify-css is leveraging clean-css's code too.
Also the usage of gulp-less with gulp-sourcemaps to create sourcemaps has been described at https://github.com/plus3network/gulp-less#source-maps
So you should be able to use:
var LessPluginCleanCSS = require("less-plugin-clean-css"),
cleancss = new LessPluginCleanCSS({advanced: true});
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
gulp.src('./less/**/*.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix, cleancss]
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/css'));
The above should generate the autoprefixed and minified CSS of your Less source, with CSS sourcemaps written into ./public/css/maps
I want to use semantic-ui within ember-cli project, having trouble with including fonts.
bower install semantic-ui
Import css and fonts in Brocfile.js
app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');
var semanticFonts =
pickFiles('bower_components/semantic-ui/dist/themes/default/assets/fonts', {
srcDir: '/',
files: ['**/*'],
destDir: 'assets/themes/default/assets/fonts'
});
This works, because semantic.css looks for themes/default/assets/fonts relative to itself.
Note the destDir: 'assets/themes/default/assets/fonts', this is because ember-cli puts the semantic-css within assets/ folder, and I have to put the fonts in that folder. But this looks like a hack is there a better solution?
Finally semantic-ui dist folder doesn't include different build options, do I have to compile the project myself eg: using gulp?, I thought using bower it should be straightforward.
We also got 404's for the fonts after installing Semantic via Bower. We solved it by adding the font folder as a tree to the Ember build.var
EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true
},
fingerprint: {
extensions: ['js', 'css', /*'png', 'jpg', 'gif',*/ 'map']
}
});
app.import('bower_components/semantic/dist/semantic.css');
app.import('vendor/shims.js');
var semanticIcons = pickFiles('bower_components/semantic/dist/themes/default/assets/fonts', {
srcDir: '/',
destDir: '/assets/themes/default/assets/fonts'
});
return app.toTree([semanticIcons]);
};
Looking at semantic-ui, it seems pretty gigantic, and specifically setup with gulp.
First off, I would use the flag --save in your bower request.
bower install --save semantic-ui
This will add it as a dependency to your bower.json automatically - or --save-dev if it's only for development and not production.
Semantic-ui looks like it's written in "LESS", so not only do you have to deal with a favored build tool, but also it has opinions about the preprocessor.
The fonts involved seem to be just some google includes, and some svg fonts.
My advice, if you really really want to use a monstrous set of CSS declarations like this, - in this situation - would be to take the /dist output .css and .js -and- combine it with YOUR favorite css pre processing setup - and just override where appropriate. - or borrow the forms or whatever specific styles lead you to want to use this.
I am worried that fully integrating it into your ember project wont be as smooth as intended... and that you won't get a terribly useful amount of stuff out of keeping it in sync.
Just my opinion, - but I can't comment yet. - and I think you would be better off just writing the styles in stylus from scratch anyways. : )
I had the same problem.
I don't know if there's a better way, but I added the following line to the config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'semantic-ui', 'dist')
This adds the dist folder to the asset path, so when semantic-ui is looking for /themes, it will be picked up.
I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow:
Edit bower_components/bootstrap/less/variables.less
Recompile bootstrap using grunt build
The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to variables.less.
Is there a way I can keep my changes outside of bower_components and also avoid having bower_components in source control since it's 122MB?
you can create a variables-custom.less and import it into theme.less like this:
//
// Load core variables and mixins
// --------------------------------------------------
#import "variables.less";
//import custom-variables after variables so the values will override.
#import "custom-variables.less"; //only has variables that have changed.
#import "mixins.less";
IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower
Here's the solution which worked for me:
Use bower to install all UI packages e.g. bower install bootstrap chosen
Create a separate folder less which contains all the LESS modifications. This article was very helpful here.
Here's my less/styles.less file:
#import "../bower_components/bootstrap/less/bootstrap.less";
#import "../bower_components/bootstrap-chosen/bootstrap-chosen.less";
//My custom variables - overrides the bootstrap variables file
#import "variables-custom.less";
Use grunt to monitor changes within the less folder and compile them into .css
Here's my Gruntfile.js (thanks to this answer):
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],
yuicompress: true
},
files: {
"./static/css/styles.css": "./less/styles.less"
}
}
},
watch: {
files: "./less/*",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
This is indeed the best customization method. You create a theme.less and pull in original Bootstrap files (which can get upgraded in the future) and in the same file you call your own custom overrides. Either you #import them from a custom file which is not in the Bower directory or you just write your custom rules in your theme.less itself. You'll find this technique explained in this tutorial as well.
With Grunt, custom setups can get tricky. But with Brunch it's a piece of cake (yes!) and all pretty much goes automatically. Your grandma could do it.
As for avoiding the inclusion of bower_components in source control: with Git it's easy. You just check-in your bower.json but make sure to add /bower_components to your .gitignore file.
You should just create your own style sheet, use both with your custom one listed secondly. That way you can make changes but not change bootstrap at all.
Also, when you update, you keep your style sheet the same.
This allows you to change bits and pieces of Bootstrap but not actually changing the file, you're overriding it.
To be clear, your second CSS file would be SIGNIFICANTLY smaller... Only putting things your needed to change in it.