Skip to content

Commit

Permalink
Config-based build
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 29, 2017
1 parent ca2824e commit 529f203
Show file tree
Hide file tree
Showing 8 changed files with 130 additions and 90 deletions.
30 changes: 24 additions & 6 deletions scripts/build-js.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,17 @@ const rename = require('gulp-rename');
const config = require('./config.js');
const banner = require('./banner.js');

function es(cb) {
function es(components, cb) {
const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'universal';
const target = process.env.TARGET || config.target;
rollup({
entry: './src/swiper.js',
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(env), // or 'production'
'process.env.TARGET': JSON.stringify(target), // or 'production'
'//IMPORT_COMPONENTS': components.map(component => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'),
'//INSTALL_COMPONENTS': components.map(component => `.use(${component.capitalized})`).join('\n '),
}),
buble(),
],
Expand All @@ -48,15 +50,17 @@ function es(cb) {
if (cb) cb();
});
}
function umd(cb) {
function umd(components, cb) {
const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'universal';
const target = process.env.TARGET || config.target;
rollup({
entry: './src/swiper.js',
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(env), // or 'production'
'process.env.TARGET': JSON.stringify(target), // or 'production'
'//IMPORT_COMPONENTS': components.map(component => `import ${component.capitalized} from './components/${component.name}/${component.name}';`).join('\n'),
'//INSTALL_COMPONENTS': components.map(component => `.use(${component.capitalized})`).join('\n '),
}),
resolve({ jsnext: true }),
buble(),
Expand Down Expand Up @@ -98,16 +102,30 @@ function umd(cb) {
function build(cb) {
const env = process.env.NODE_ENV || 'development';

const components = [];
config.components.forEach((name) => {
const capitalized = name.split('-').map((word) => {
return word.split('').map((char, index) => {
if (index === 0) return char.toUpperCase();
return char;
}).join('');
}).join('');
const jsFilePath = `./src/components/${name}/${name}.js`;
if (fs.existsSync(jsFilePath)) {
components.push({ name, capitalized });
}
});

const expectCbs = env === 'development' ? 1 : 2;
let cbs = 0;

umd(() => {
umd(components, () => {
cbs += 1;
if (cbs === expectCbs) cb();
});

if (env === 'production') {
es(() => {
es(components, () => {
cbs += 1;
if (cbs === expectCbs) cb();
});
Expand Down
21 changes: 21 additions & 0 deletions scripts/build-less.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,28 @@ const banner = require('./banner.js');
function build(cb) {
const env = process.env.NODE_ENV || 'development';

const components = [];
config.components.forEach((name) => {
const lessFilePath = `./src/components/${name}/${name}.less`;
if (fs.existsSync(lessFilePath)) {
components.push(name);
}
});

const colors = [];

Object.keys(config.colors).forEach((key) => {
colors.push(`${key} ${config.colors[key]}`);
});

gulp.src('./src/swiper.less')
.pipe(modifyFile((content) => {
const newContent = content
.replace('//IMPORT_COMPONENTS', components.map(component => `@import url('./components/${component}/${component}.less');`).join('\n'))
.replace('$themeColor', config.themeColor)
.replace('$colors', colors.join(', '));
return newContent;
}))
.pipe(less())
.on('error', (err) => {
if (cb) cb();
Expand Down
29 changes: 28 additions & 1 deletion scripts/config.js
Original file line number Diff line number Diff line change
@@ -1 +1,28 @@
module.exports = {};
module.exports = {
components: [
'observer',
'keyboard',
'mousewheel',
'navigation',
'pagination',
'scrollbar',
'parallax',
'zoom',
'lazy',
'controller',
'a11y',
'history',
'hash-navigation',
'autoplay',
'effect-fade',
'effect-cube',
'effect-flip',
'effect-coverflow',
],
target: 'universal',
themeColor: '#007aff',
colors: {
white: '#ffffff',
black: '#000000',
},
};
27 changes: 13 additions & 14 deletions src/components/navigation/navigation.less
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* Arrows */
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
Expand All @@ -17,24 +16,24 @@
}
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#007aff'/></svg>");
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{themeColor}'/></svg>");
left: 10px;
right: auto;
&.swiper-button-black {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#000000'/></svg>");
}
&.swiper-button-white {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#ffffff'/></svg>");
}
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#007aff'/></svg>");
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{themeColor}'/></svg>");
right: 10px;
left: auto;
&.swiper-button-black {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#000000'/></svg>");
}
.navigation-color-loop({
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
&.swiper-button-@{navColorName} {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{navColorValue}'/></svg>");
}
}
&.swiper-button-white {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#ffffff'/></svg>");
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
&.swiper-button-@{navColorName} {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{navColorValue}'/></svg>");
}
}
}
});
31 changes: 11 additions & 20 deletions src/components/pagination/pagination.less
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
Expand Down Expand Up @@ -56,20 +55,12 @@
.swiper-pagination-clickable & {
cursor: pointer;
}
.swiper-pagination-white & {
background: #fff;
}
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff;
.swiper-pagination-white & {
background: #fff;
}
.swiper-pagination-black & {
background: #000;
}
background: @themeColor;
}

.swiper-container-vertical {
> .swiper-pagination-bullets {
right: 10px;
Expand Down Expand Up @@ -110,7 +101,7 @@
background: rgba(0,0,0,0.25);
position: absolute;
.swiper-pagination-progressbar-fill {
background: #007aff;
background: @themeColor;
position: absolute;
left: 0;
top: 0;
Expand All @@ -134,15 +125,15 @@
left: 0;
top: 0;
}
&.swiper-pagination-white {
background: rgba(255,255,255,0.5);
.swiper-pagination-progressbar-fill {
background: #fff;
}
}
.pagination-color-loop({
.swiper-pagination-@{paginationColorName} .swiper-pagination-bullet-active {
background: @paginationColorValue;
}
&.swiper-pagination-black {
.swiper-pagination-progressbar.swiper-pagination-@{paginationColorName} {
background: rgba(red(@paginationColorValue), green(@paginationColorValue), blue(@paginationColorValue), 0.25);
.swiper-pagination-progressbar-fill {
background: #000;
background: @paginationColorValue;
}
}
}
});
23 changes: 23 additions & 0 deletions src/less/mixins.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,26 @@
@url: `encodeURIComponent(@{svg})`;
background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}
.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
@length: length( @colors ) ;
.looper( 1 ) ;
.looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
@navPair: extract( @colors, @index );
@navColorName: extract( @navPair, 1 ) ;
@navColorValue: extract( @navPair, 2 ) ;
@ruleset();
.looper( @index + 1 ) ;
}
}

.pagination-color-loop(@ruleset) when (length( @colors ) >= 1) {
@length: length( @colors ) ;
.looper( 1 ) ;
.looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
@paginationPair: extract( @colors, @index );
@paginationColorName: extract( @paginationPair, 1 ) ;
@paginationColorValue: extract( @paginationPair, 2 ) ;
@ruleset();
.looper( @index + 1 ) ;
}
}
46 changes: 5 additions & 41 deletions src/swiper.js
Original file line number Diff line number Diff line change
@@ -1,57 +1,21 @@
// F7 Class
import Swiper from './components/core/core-class';

// Import Modules
// Core Modules
import Device from './modules/device/device';
import Support from './modules/support/support';
import Browser from './modules/browser/browser';
import Resize from './modules/resize/resize';

import Observer from './components/observer/observer';
import Keyboard from './components/keyboard/keyboard';
import Mousewheel from './components/mousewheel/mousewheel';
import Navigation from './components/navigation/navigation';
import Pagination from './components/pagination/pagination';
import Scrollbar from './components/scrollbar/scrollbar';
import Parallax from './components/parallax/parallax';
import Zoom from './components/zoom/zoom';
import Lazy from './components/lazy/lazy';
import Controller from './components/controller/controller';
import A11y from './components/a11y/a11y';
import History from './components/history/history';
import HashNavigation from './components/hash-navigation/hash-navigation';
import Autoplay from './components/autoplay/autoplay';
//IMPORT_COMPONENTS

// Effects
import EffectFade from './components/effect-fade/effect-fade';
import EffectCube from './components/effect-cube/effect-cube';
import EffectFlip from './components/effect-flip/effect-flip';
import EffectCoverflow from './components/effect-coverflow/effect-coverflow';

// Install Modules
// Install Modules & Components
Swiper
// Core Modules
.use(Device)
.use(Support)
.use(Browser)
.use(Resize)
// Install Components
.use(Keyboard)
.use(Mousewheel)
.use(Navigation)
.use(Pagination)
.use(Observer)
.use(Scrollbar)
.use(Parallax)
.use(Zoom)
.use(Lazy)
.use(Controller)
.use(A11y)
.use(History)
.use(HashNavigation)
.use(Autoplay)
.use(EffectFade)
.use(EffectFlip)
.use(EffectCube)
.use(EffectCoverflow);
//INSTALL_COMPONENTS

export default Swiper;
13 changes: 5 additions & 8 deletions src/swiper.less
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
@import url('./less/mixins.less');

@themeColor: $themeColor;
@colors: $colors;

@import url('./components/core/core.less');
@import url('./components/navigation/navigation.less');
@import url('./components/pagination/pagination.less');
@import url('./components/zoom/zoom.less');
@import url('./components/scrollbar/scrollbar.less');
@import url('./components/effect-fade/effect-fade.less');
@import url('./components/effect-coverflow/effect-coverflow.less');
@import url('./components/effect-flip/effect-flip.less');
@import url('./components/effect-cube/effect-cube.less');

//IMPORT_COMPONENTS

0 comments on commit 529f203

Please sign in to comment.