-
-
Notifications
You must be signed in to change notification settings - Fork 161
Installation
- Install NodeJS
- Install Gulp:
npm install --global gulp
- Install dev dependencies:
npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer lost
- Create a
gulpfile.js
with the following code:
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('autoprefixer'),
lost = require('lost');
var paths = {
cssSource: 'src/css/',
cssDestination: 'dist/css/'
};
gulp.task('styles', function() {
return gulp.src(paths.cssSource + '**/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([
lost(),
autoprefixer()
]))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.cssDestination));
});
gulp.watch(paths.cssSource + '**/*.css', ['styles']);
gulp.task('default', ['styles']);
- Run
gulp
This will watch your src/css/
directory for any changes to CSS files and then
process them with Autoprefixer and Lost Grid (which will convert Lost Grid rules
into vanilla CSS code), create sourcemaps, and output the processed CSS and
sourcemaps to dist/css/
.
- Install NodeJS
- Install Grunt:
npm install --global grunt-cli
- Install dev dependencies:
npm install --save-dev grunt grunt-postcss grunt-autoprefixer grunt-contrib-watch lost
- Create a
Gruntfile.js
with the following code:
module.exports = function(grunt) {
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('lost')
]
},
dist: {
src: 'src/css/style.css',
dest: 'dist/css/style.css'
}
},
autoprefixer: {
single_file: {
src: 'dist/css/style.css',
dest: 'dist/css/style.css'
}
},
watch: {
files: ['src/css/style.css'],
tasks: ['postcss', 'autoprefixer']
}
});
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
- Run
grunt
This will watch your src/css/style.css
file for any changes and then
process it with Autoprefixer and Lost Grid (which will convert Lost Grid rules
into vanilla CSS code), and output the processed CSS to dist/css/style.css
.
- Install NodeJS
- Install Brunch
npm install -g brunch
- Create a new Brunch project
brunch new https://github.com/brunch/dead-simple
- Install PostCSS
npm install --save postcss-brunch
- Install Autoprefixer
npm install --save autoprefixer
- Install Lost
npm install --save lost
- Update
brunch-config.coffee
exports.config =
# See http://brunch.io/#documentation for docs.
files:
javascripts:
joinTo: 'app.js'
stylesheets:
joinTo: 'app.css'
templates:
joinTo: 'app.js'
plugins:
postcss:
processors: [
require('autoprefixer')(),
require('lost')
]
- Run
brunch watch
This will watch your app/style.css file for any changes and then process it with Autoprefixer and Lost Grid (which will convert Lost Grid rules into vanilla CSS code), and output the processed CSS to public/app.css.
To use Lost with the Stylus preprocessor, use PostStylus and implement poststylus('lost')
as a regular Stylus plugin:
stylus(css).use(poststylus('lost'))
See the PostStylus Docs for more examples (Gulp, Grunt, CLI, etc.).
To use Lost directly with node.js
var postcss = require('postcss');
var lost = require('lost');
postcss([ lost ]).process(css).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
console.log(result.css);
});
To pass options through to Lost:
var lost_options = {"gutter": "30px", "flexbox": "no-flex", "cycle": "auto"};
postcss([ lost(lost_options) ]).process(css).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
console.log(result.css);
});
- Install Lost
npm install --save lost
To use Lost within your webpack config (assuming you have postcss-loader installed & configured) :
postcss: [
require('lost')
]
- Install Lost:
npm install --save-dev lost
- If you don't have it install juliancwirko:postcss package:
meteor add juliancwirko:postcss
- Remove Meteor
standard-minifier-css
package:meteor remove standard-minifier-css
Configure your package.json
file (example):
{
"name": "Demo Lost app",
"version": "1.0.0",
"description": "",
"author": "",
"devDependencies": {
"autoprefixer": "^6.3.5",
"postcss-easy-import": "^1.0.1",
"lost": "^6.7.2"
},
"postcss": {
"plugins": {
"postcss-easy-import": {},
"lost": {},
"autoprefixer": {"browsers": ["last 2 versions"]}
}
}
}
- restart Meteor app