|
1 | | -# README |
| 1 | +# Using Postcss in Ruby on Rails - BrowserSync with Gulp |
2 | 2 |
|
3 | | -This README would normally document whatever steps are necessary to get the |
4 | | -application up and running. |
| 3 | +## Pasos para configurar |
| 4 | +_Aplicación de Rails ya creada_ |
5 | 5 |
|
6 | | -Things you may want to cover: |
| 6 | +- Ejecutar `npm init` y configurar el **package.json** |
| 7 | +- Instalar gulp localmente `npm install gulp` |
| 8 | +- Agregar en el .gitignore la carpeta /node_modules |
| 9 | +- Crear archivo **gulpfile.js** en directorio raíz |
| 10 | +- En **config/application.rb** requerir los archivos: |
| 11 | + config.assets.paths << Rails.root.join("public", "assets", "stylesheets") |
| 12 | + config.assets.paths << Rails.root.join("public", "assets", "javascripts") |
| 13 | +- En **app/assets/stylesheets/application.css** requerir el archivo de salida que está en public: |
| 14 | +`*= require main` |
| 15 | +- En **config/environments/development.rb** configurar (para aprovechar BroswerSync): |
| 16 | + config.assets.debug = true |
| 17 | + config.assets.digest = false |
| 18 | +- En **package.json** agregar en *scripts* lo siguiente para limpiar y compilar: |
| 19 | + "postinstall": "gulp clean; gulp css;" |
| 20 | +- Para usar un plugin de postcss primero se debe instalar usando `npm install --save-dev [nombre_plugin]` |
7 | 21 |
|
8 | | -* Ruby version |
| 22 | +## El archivo gulpfile.js |
9 | 23 |
|
10 | | -* System dependencies |
| 24 | +- Se deben requerir los siguiente módulos: |
| 25 | + var gulp = require('gulp') |
| 26 | + var postcss = require('gulp-postcss') |
| 27 | + var browserSync = require('browser-sync').create() |
| 28 | + var del = require('del'); |
| 29 | + var rename = require('gulp-rename') |
| 30 | +- Y adicionalmente las partes de postcss que se desean usar (ver http://postcss.parts): |
| 31 | + var rucksack = require('rucksack-css') |
| 32 | + var cssnext = require('postcss-cssnext') |
| 33 | + var autoprefixer = require('autoprefixer') |
| 34 | + var cssnested = require('postcss-nested') |
| 35 | + var mixins = require('postcss-mixins') |
| 36 | + var lost = require('lost') |
| 37 | + var atImport = require('postcss-import') |
| 38 | + var csswring = require('csswring') |
| 39 | + var materialShadow = require('postcss-material-shadow-helper') |
| 40 | + var instagram = require('postcss-instagram') |
| 41 | + var coloralpha = require('postcss-color-alpha') |
| 42 | +- Deberá tener las siguientes cuatro fuciones principales: |
11 | 43 |
|
12 | | -* Configuration |
| 44 | + gulp.task('clean', function () { |
| 45 | + del('./public/assets/stylesheets'); |
| 46 | + }); |
13 | 47 |
|
14 | | -* Database creation |
| 48 | + gulp.task('serve', function () { |
| 49 | + browserSync.init({ |
| 50 | + proxy: 'localhost:3000', |
| 51 | + files: ['./app/views/**'] |
| 52 | + }) |
| 53 | + }) |
15 | 54 |
|
16 | | -* Database initialization |
| 55 | + gulp.task('css', function(){ |
| 56 | + var processors = [ |
| 57 | + atImport({ |
| 58 | + path: ["./gulp/stylesheets"] |
| 59 | + }), |
| 60 | + cssnested, |
| 61 | + lost(), |
| 62 | + rucksack(), |
| 63 | + cssnext({ browsers: ['> 1%', 'last 3 versions', 'ie 8']}), |
| 64 | + materialShadow(), |
| 65 | + instagram(), |
| 66 | + // csswring() |
| 67 | + ] |
| 68 | + return gulp.src('./gulp/stylesheets/main.css') |
| 69 | + .pipe(postcss(processors)) |
| 70 | + .pipe(gulp.dest('./public/assets/stylesheets')) |
| 71 | + .pipe(rename({ |
| 72 | + suffix: '.self' |
| 73 | + })) |
| 74 | + .pipe(browserSync.stream() ) |
| 75 | + }) |
17 | 76 |
|
18 | | -* How to run the test suite |
| 77 | + gulp.task('watch', function(){ |
| 78 | + gulp.watch('./gulp/stylesheets/*.css', ['css']) |
| 79 | + gulp.watch('./app/views/**/*.html').on('change', function(){ |
| 80 | + browserSync.reload() |
| 81 | + }) |
| 82 | + }) |
19 | 83 |
|
20 | | -* Services (job queues, cache servers, search engines, etc.) |
| 84 | + gulp.task('watch', function(){ |
| 85 | + gulp.watch('./gulp/stylesheets/*.css', ['css']) |
| 86 | + gulp.watch('./app/views/**/*.html').on('change', function(){ |
| 87 | + browserSync.reload() |
| 88 | + }) |
| 89 | + }) |
21 | 90 |
|
22 | | -* Deployment instructions |
| 91 | + gulp.task('default', ['watch', 'serve']) |
23 | 92 |
|
24 | | -* ... |
| 93 | +## Consideraciones |
| 94 | + |
| 95 | +Las carpetas del código fuente deberán estar en **/gulp/assets** (crear la carpeta) |
| 96 | + |
| 97 | +Todo lo que deberá ser procesado por Gulp y Postcss Lo compilado irá directo a **/public/assets** |
0 commit comments