sourcemaps – devfrontend.info

[12:46 PM] Frank LANG: Quand t’as essayé d’installe gulp-sourcemaps, t’arrivais à avoir un fichier .map ?
[12:49 PM] Frank LANG: En fait j’avais pas encore regardé comment fonctionne le plug-in; je pense savoir d’où vient le problème
[12:50 PM] Frank LANG: on crée un fichier main.css qui est le résultat de tous nos fichiers SASS compilés et processés
[12:50 PM] Frank LANG: et (pour ma part mais j’imagine que tu étais arrivé à ce stade également), j’ai bien un fichier « main.css.map » qui est généré
[12:52 PM] Frank LANG: Sauf que Change prend « main.css » et le compile et le minifie avec d’autres fichiers CSS (skin.css pur ne citer que lui) et nous crée une CSS unique « screen.css » chargée dans la page
[12:52 PM] Frank LANG: Et c’est la raison pour laquelle le plugin sourcemaps ne fonctionne pas
[12:52 PM] Frank LANG: il se réfère à main.css
[12:53 PM] Frank LANG: et c’est « screen.css » qui est chargée en front
[1:06 PM] Frank LANG: Utiliser les sourcemaps dans Change doit être possible moyennant une grosse grosse bidouille

[1:09 PM] Frank LANG: ouais en fait j’ai réussi
[1:10 PM] Frank LANG: mais c’est lourd …
[1:11 PM] Frank LANG: dans Y:\change30\manbow\override\modules\website\templates\PageDynamic-ContentBasis.all.all.php qui est le fichier qui génère l’en-tête de page
[1:11 PM] Frank LANG: je mets un lien absolu vers main.css :
[1:12 PM] Frank LANG:

<link rel="stylesheet" href="/media/themes/responsive/main.css" type="text/css" media="screen" />

1	<link rel="stylesheet" href="/media/themes/responsive/main.css" type="text/css" media="screen" />

[1:14 PM] Frank LANG: et dans la gulpfile, je crée une nouvelle tâche ‘sass_sourcemaps’ qui va faire pareil que la tâche ‘sass’ mais qui va générer les fichiers ‘main.css’ et ’.map’ dans le dossier ‘image’ du thème car c’est le seul qui est accessible depuis le front via une URL relative
[1:14 PM] Frank LANG: Tu accèdes à : http://manbow.vmchange.rbs.fr/media/themes/responsive/main.css
[1:15 PM] Frank LANG: mais pas à : http://manbow.vmchange.rbs.fr/themes/responsive/style/main.css
[1:15 PM] Frank LANG: Avec ça, l’inspecteur d’éléments te remonte le code dans les SCSS
[1:15 PM] Frank LANG: Mais y’a plusieurs soucis :
[1:16 PM] Frank LANG: 1. je charge 2x le fichier ‘main.css’, donc tu auras toujours le code CSS compilé dans l’inspecteur d’éléments. En plus, le code SASS sera toujours déclaré après, car surchargé.
[1:17 PM] Frank LANG: 2. on peut pas laisser le lien relatif dans le fichier d’en-tête en prod; c’est pas propre (mais à la limite, faut pas inclure les sourcemaps en prod non plus; il parait que ça ralentit l’exécution des CSS)
[1:19 PM] Frank LANG: 3. ‘main.css’ ne contient que les styles issus des fichiers SASS. Les sources CSS comme par exemple ‘skin.css’ ne sont pas incluses. Ce n’ets pas si problématique je pense car l’inspecteur d’éléments te permettra de les retrouver au besoin.
[1:20 PM] Frank LANG: Ce qui est bien :
[1:20 PM] Frank LANG: 1. on a les sourcemaps
[1:21 PM] Frank LANG: malgré tout
[1:26 PM] Frank LANG: j’ai pushé le code commenté si jamais tu veux l’activer pour voir
[1:27 PM] Frank LANG: je pense que via Change, il n’y aura pas possibilité d’avoir mieux que ça

var gulp = require('gulp');
    sass = require('gulp-sass');
    imagemin = require('gulp-imagemin');
    cache = require('gulp-cache');
    flatten = require('gulp-flatten');
    iconfont = require('gulp-iconfont');
    consolidate = require('gulp-consolidate');
	sourcemaps = require('gulp-sourcemaps');
	postcss = require('gulp-postcss');
	autoprefixer = require('autoprefixer')({
		browsers: ['last 5 versions'],
		cascade: false
	});
    runTimestamp = Math.round(Date.now()/1000);


gulp.task('sass', function(){
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('style'))
});

// gulp.task('sass_sourcemaps', function(){
//   return gulp.src('src/sass/**/*.scss')
//     .pipe(sourcemaps.init())
//     .pipe(sass().on('error', sass.logError))
//     .pipe(sourcemaps.write('.'))
//     .pipe(gulp.dest('image'))
// });

gulp.task('css', function(){
  return gulp.src('src/style/*.css')
    .pipe(cache(flatten()))
	.pipe(postcss([autoprefixer]))
	.pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('style'))
});

// Watch style tasks only with 'gulp style'
gulp.task('style', ['sass', 'css'], function(){
  gulp.watch('src/sass/**/*.scss', ['sass']);
  gulp.watch('src/style/*.css', ['css']);
});

// style tasks w/Sourcemaps
// gulp.task('style', ['sass', 'sass_sourcemaps', 'css'], function(){
//   gulp.watch('src/sass/**/*.scss', ['sass']);
//   gulp.watch('src/style/*.css', ['css']);
// });

var gulp = require('gulp');

sass = require('gulp-sass');

imagemin = require('gulp-imagemin');

cache = require('gulp-cache');

flatten = require('gulp-flatten');

iconfont = require('gulp-iconfont');

consolidate = require('gulp-consolidate');

sourcemaps = require('gulp-sourcemaps');

postcss = require('gulp-postcss');

autoprefixer = require('autoprefixer')({

browsers: ['last 5 versions'],

cascade: false

});

runTimestamp = Math.round(Date.now()/1000);

gulp.task('sass', function(){

return gulp.src('src/sass/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('style'))

});

// gulp.task('sass_sourcemaps', function(){

// return gulp.src('src/sass/**/*.scss')

// .pipe(sourcemaps.init())

// .pipe(sass().on('error', sass.logError))

// .pipe(sourcemaps.write('.'))

// .pipe(gulp.dest('image'))

// });

gulp.task('css', function(){

return gulp.src('src/style/*.css')

.pipe(cache(flatten()))

.pipe(postcss([autoprefixer]))

.pipe(sourcemaps.write('maps'))

.pipe(gulp.dest('style'))

});

// Watch style tasks only with 'gulp style'

gulp.task('style', ['sass', 'css'], function(){

gulp.watch('src/sass/**/*.scss', ['sass']);

gulp.watch('src/style/*.css', ['css']);

});

// style tasks w/Sourcemaps

// gulp.task('style', ['sass', 'sass_sourcemaps', 'css'], function(){

// gulp.watch('src/sass/**/*.scss', ['sass']);

// gulp.watch('src/style/*.css', ['css']);

// });

Articles récents

Catégories

Archives

Méta

Étiquette : sourcemaps

[Change 3.x][Gulp] Ajouter les Sourcemaps dans RBS Change