อีกวิธีหนึ่งคือการใช้ gulp-template เพื่อให้คุณสามารถสร้างโครงสร้างใดๆ ที่คุณต้องการสำหรับ JavaScript ของคุณได้
การแชร์ตัวแปรระหว่าง Javascript และ Sass โดยใช้ Gulp กับ gulp-template https://youtu.be/UVeUq8gMYco
มันถูกสร้างขึ้นตั้งแต่เริ่มต้นเพื่อให้ผู้คนสามารถมองเห็นมันได้จากพื้นดินและมี repo git พร้อมผลลัพธ์สุดท้าย:
https://github.com/PocketNinjaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev
โดยพื้นฐานแล้วคุณมีวัตถุกำหนดค่าของคุณ
บันทึกที่ ./dev/config.js
module.exports = {
defaults: {
colours: {
primary: '#fc0'
},
sizes: {
small: '100px',
medium: '500px',
large: '1000px'
},
zIndex: {
model: 100,
dropdown: 50,
header: 10
}
}
}
จากนั้นคุณก็จะมีเทมเพลตทั้งสองสำหรับ Sass และ Javascript หรือน้อยกว่านั้นหรืออะไรก็ได้ที่คุณต้องการ
เทมเพลตขีดเส้นใต้ Sass
บันทึกที่ ./dev/templates/sass-config.txt
<% _.each(defaults, function(category, key) { %>
// Var <%= key %>
<% _.each(category, function(value, key) { %>
$<%= key %>: <%= value %>;
<% }) %>
<% }) %>
เทมเพลตขีดเส้นใต้ Javascript
บันทึกที่ ./dev/templates/js-config.txt
namespace.config = {};
<% _.each(defaults, function(monkey, key) { %>
namespace.config.<%= key %> = {
<% i = 1 %>
<% _.each(monkey, function(value, key) { %>
<% comma = (Object.keys(monkey).length === i) ? '': ',' %>
<% if(typeof value === 'string') {%>
<%= key %>: '<%= value %>'<%= comma %>
<%} else { %>
<%= key %> : <%= value %><%= comma %>
<% } %>
<% i++ %>
<% }); %>
};
<% }) %>
จากนั้นให้อึกเพื่อเรียบเรียงค่ะ
var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');
var removeEmptyLines = require('gulp-remove-empty-lines');
var sharedVars = require('./dev/config');
gulp.task('compile', function() {
gulp.src('./dev/templates/sass-config.txt')
.pipe(template(sharedVars))
.pipe(rename('_sass-config.scss'))
.pipe(removeEmptyLines())
.pipe(gulp.dest('./dev/sass'));
gulp.src('./dev/templates/js-config.txt')
.pipe(template(sharedVars))
.pipe(rename('js-config.js'))
.pipe(removeEmptyLines())
.pipe(gulp.dest('./dev/js'));
});
person
Pocketninja
schedule
24.10.2016
