Despues de haber cambiado las directrices del subtema STARTER de foundation procedemos con los siguientes pasos:
Generar archivo Package.json:
- En la caperta raiz del tema, debemos ejecutar :
git init
- Este comando nos crea automaticamente el Package.json que viene con una configuracion basica, y ahora debemos agregar las funcionalidades:
{
"name": "sitename",
"version": "1.0.0",
"description": "theme website sitename",
"main": "gulpfile.js",
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-babel": "^6.1.2",
"gulp-sass": "^3.1.0"
},
"scripts": {
"postinstall": "find node_modules/ -name '*.info' -type f -delete",
"start": "gulp watch"
},
"author": "dayscript <soporte@dayscript.com>",
"license": "ISC"
}
- Ahora se debe crear el archivo gulpfile.js en la carpeta raiz del tema:
nano gulpfile.js
- Y lo modificamos con la siguiente configuración:
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
prefix = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
babel = require('gulp-babel'),
cp = require('child_process');
/**
* Lanzar servidor web
*/
gulp.task('browser-sync', ['sass', 'scripts'], function() {
browserSync.init({
// Change as required, also remember to set in theme settings
proxy: "HOSTNAME.dev",
port: 3000
});
});
/**
* @task sass
* Compilar archivos SCSS scss
*/
gulp.task('sass', function () {
return gulp.src('scss/nombre-del-tema.scss')
.pipe(sass())
.pipe(prefix(['last 3 versions', '> 1%', 'ie 8'], { cascade: true }))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({stream:true}))
});
/**
* @task scripts
* Compilar arhivos JS
*/
gulp.task('scripts', function() {
return gulp.src(['js/*.js', 'js/nombre-del-tema.js'])
.pipe(babel({
presets: ['es2015']
}))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({stream:true}))
});
/**
* @task clearcache
* Reconstruir cache de Drupal
*/
gulp.task('clearcache', function(done) {
return cp.spawn('drush', ['cache-rebuild'], {stdio: 'inherit'})
.on('close', done);
});
/**
* @task reload
* Actualizar la pagina (no funciona en Drupal)
*/
gulp.task('reload', ['clearcache'], function () {
browserSync.reload();
});
/**
* @task watch
* Watch scss files for changes & recompile
* Clear cache when Drupal related files are changed
*/
gulp.task('watch', function () {
gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass']);
gulp.watch(['js/*.js'], ['scripts']);
gulp.watch(['templates/*.html.twig', '**/*.yml'], ['reload']);
});
/**
* Default task, running justgulpwill
* compile Sass files, launch BrowserSync, watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
- Finalamente ejecutamos:
npm install
npm start
Comentarios