boilerplate.js
Version:
Development Tools
231 lines (193 loc) • 8.75 kB
JavaScript
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const gulpif = require('gulp-if');
var toChange = true;
function SASS() {
var postcss;
var mqExtract
var options = {};
options.prod = false;
options.debug = false;
process.argv.indexOf('--prod') >= 0 ? options.prod = true : options.debug = true;
var through = $REQUIRE('through2');
if (process.argv.indexOf('--separate') >= 0) {
postcss = $REQUIRE('postcss');
options.separate = true;
options.prod = true;
options.debug = false;
} else {
options.separate = false;
}
if (config.jigsaw) {
options.separate = true;
}
options.separate = config.css.separate || options.separate;
var input = path.resolve(config.css.input);
if (toChange) {
var result;
fs.readFile(input, 'utf8', function (err, data) {
if (err) return console.log(err);
if (options.prod && data.indexOf('// @import "_dev";') < 0) {
result = data.replace(/@import "_dev";/g, '// @import "_dev";');
} else {
result = data;
}
if (options.debug) result = data.replace(/\/\/ @import "_dev";/g, '@import "_dev";');
fs.writeFile(input, result, 'utf8', function (err) {
toChange = false;
SASS();
});
});
return;
}
var begin = Date.now();
try {
if ( config.watch.css.before ) gulp.start('watch:css:before');
} catch (error) {
null;
}
function message() {
if (options.prod) {
console.log('\x1b[33m%s\x1b[0m', 'Compiling Production SASS ' + input);
console.log('\x1b[32m%s', 'Saved in ' + config.css.output);
return true;
}
if (options.debug) {
console.log('\x1b[33m%s\x1b[0m', 'Compiling Dev SASS ' + input);
console.log('\x1b[32m%s', 'Saved in ' + config.css.output);
return true;
}
}
var gulpSASS = gulp.src(input)
.on('end', () => {
var end = Date.now();
var timeSpent = (end - begin) + "ms";
console.log('\x1b[36m%s\x1b[0m', 'Finished Compile: ' + timeSpent);
options.separate || browserSync.reload();
try {
if ( config.watch.css.after ) gulp.start('watch:css:after');
} catch (error) {
null;
}
setTimeout(() => {
after_gulp(options);
}, 1000);
})
.pipe(sourcemaps.init())
.pipe(gulpif(options.debug && message, sass({ outputStyle: 'debug' }).on('error', sass.logError)))
.pipe(gulpif(options.prod && message, sass({ outputStyle: 'compressed' }).on('error', sass.logError)))
.pipe(autoprefixer('last 2 version'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(config.css.output));
console.log('\x1Bc');
console.log('\x1b[36m%s\x1b[0m', company);
console.log('\x1b[37m%s', new Date().toUTCString());
try {
browserSync.instances[0].instance.utils.devIp().forEach(ip => {
console.log(`http://${ip}:3000`.magenta);
});
} catch (error) {}
require('./mix-manifest').init();
function after_gulp(opt) {
var file = config.css.base.split('.')[0];
var input = path.resolve(`${config.css.output}${file}.css`);
if(options.separate) {
const options = {
production: opt.prod,
base: file,
outpath: config.css.output,
files: [
{
name: 'app-mobile.css',
match: [
'only screen and \\(max-width: 1439px\\)',
'only screen and \\(max-width: 1247px\\)',
'only screen and \\(max-width: 1023px\\)',
'only screen and \\(max-width: 767px\\)',
'only screen and \\(max-width: 639px\\)',
'only screen and \\(max-width: 559px\\)',
'only screen and \\(max-width: 479px\\)',
'only screen and \\(max-width: 399px\\)',
'only screen and \\(min-width: 560px\\)',
'only screen and \\(min-width: 480px\\)',
'only screen and \\(min-width: 400px\\)',
'\\(min-width: 400px\\) and \\(max-width: 479px\\)',
'\\(min-width: 0px\\) and \\(max-width: 639px\\)',
'\\(min-width: 0\\) and \\(max-width: 1247px\\)',
'\\(min-width: 0\\) and \\(max-width: 639px\\)',
'\\(min-width: 560px\\)',
'\\(min-width: 480px\\)',
'not all and \\(min-width: 640px\\) and \\(max-width: 1247px\\)',
]
},
{
name: 'app-tablet.css',
match: [
'only screen and \\(max-width: 1439px\\)',
'only screen and \\(max-width: 1247px\\)',
'only screen and \\(max-width: 767px\\)',
'only screen and \\(max-width: 1023px\\)',
'only screen and \\(max-width: 639px\\)',
'\\(min-width: 640px\\) and \\(max-width: 1247px\\)',
'\\(min-width: 640px\\) and \\(max-width: 9999px\\)',
'\\(min-width: 0\\) and \\(max-width: 1247px\\)',
'only screen and \\(min-width: 640px\\)',
'only screen and \\(min-width: 768px\\)',
'only screen and \\(min-width: 1024px\\)',
'\\(min-width: 480px\\)',
'\\(min-width: 560px\\)',
'\\(min-width: 640px\\)',
'\\(min-width: 768px\\)',
'\\(min-width: 1024px\\)',
]
},
{
name: 'app-desktop.css',
match: [
'only screen and \\(max-width: 1439px\\)',
'only screen and \\(max-width: 1247px\\)',
'\\(min-width: 480px\\)',
'\\(min-width: 560px\\)',
'\\(min-width: 640px\\)',
'\\(min-width: 768px\\)',
'\\(min-width: 1024px\\)',
'\\(min-width: 1248px\\)',
'\\(min-width: 1440px\\)',
'only screen and \\(min-width: 1440px\\)',
'\\(min-width: 640px\\) and \\(max-width: 9999px\\)',
'not all and \\(min-width: 640px\\) and \\(max-width: 1247px\\)',
'only screen and \\(min-width: 1248px\\)'
]
},
]
};
fs.readFile(input, (err, data) => {
if (err) throw err;
data = data.toString();
require('./splitMQ').process(data, options, () => {
browserSync.reload();
});
});
console.log('Finished Seperating CSS Files'.green);
fs.ensureFile(`${config.js.dir}/components/loadAssets().js`, function () {
fs.readFile(`${config.js.dir}/components/loadAssets().js`, (err, data) => {
data = data.toString();
if (data.length === 0) {
fs.writeFileSync(`${config.js.dir}/components/loadAssets().js`, `
// Use this component anywhere -> components.loadAssets();
components.loadAssets = function () {
Defer('css', '${config.css.public || config.css.output}/app.css'.replace('//', '/'));
mq('PHONE') && Defer('css', '${config.css.public || config.css.output}/app-mobile.css'.replace('//', '/'));
mq('TABLET') && Defer('css', '${config.css.public || config.css.output}/app-tablet.css'.replace('//', '/'));
mq('DESKTOP') && Defer('css', '${config.css.public || config.css.output}/app-desktop.css'.replace('//', '/'));
};
onResize(components.loadAssets);`);
console.log(`Added ${config.js.dir}/components/loadAssets().js`.green, '(You May Have To Change The CSS Public Path In This File)'.red);
}
});
})
}
}
}
module.exports = { SASS };