plugins: () => {
const plugins = [
postcssImport(),
postcssPresetEnv({
stage: 0
})
]
if (argv.mode === 'production') {
plugins.push(cssnano());
}
return plugins;
}
gulp.task('css', () => {
const processors = [
cssnext({ browsers: ['last 2 versions'] }),
sorting({ 'sort-order': 'csscomb' }),
cssnano({ autoprefixer: false }),
]
return gulp
.src('./src/styles/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./docs'))
.pipe(reload({ stream: true }))
})
gulp.task('createCSS', function() {
return gulp.src(activatedAnimations)
.pipe(concat(opts.concatName))
.pipe(postcss([
autoprefixer(opts.autoprefixer)
]))
.pipe(gulp.dest(opts.destPath))
.pipe(postcss([
autoprefixer(opts.autoprefixer),
cssnano({reduceIdents: {keyframes: false}})
]))
.pipe(rename(opts.minRename))
.pipe(gulp.dest(opts.destPath));
});
gulp.task('sass', function () {
var processors = [ // https://github.com/ai/browserslist
autoprefixer({ // 默认是 > 1%, last 2 versions, firefox ESR
browsers: ['> 5%', 'last 5 versions', 'Firefox >= 20', 'IE >= 7']
}),
cssnext,
precss,
cssnano()
];
return gulp.src(src.scss)
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest(dest.css));
});
function generate (maps, css, options) {
var file = options.file || 'styleguide'
var project = options.name || 'Style Guide'
var template = importTemplate(options)
var tmplStyle = importStyle(options)
var codeStyle = fs.readFileSync(__dirname + '/node_modules/highlight.js/styles/github.css', 'utf-8').trim()
var obj = {
projectName: project,
css: nano(css),
tmplStyle: nano(tmplStyle),
codeStyle: nano(codeStyle),
maps: maps
}
var html = ejs.render(template, obj)
fs.writeFile(file + '.html', html, function (err) {
if (err) {
throw err
}
console.log('Successed to generate style guide')
})
}
module.exports = () => ({
plugins: [
url,
imports,
mixins,
nested,
postCSSPresetEnv({
stage: 1,
}),
cssnano({
preset: "default",
}),
],
});
const transformCss = exports.transformCss = function(filename, opt_cssnano) {
opt_cssnano = opt_cssnano || Object.create(null);
// See http://cssnano.co/optimisations/ for full list.
// We try and turn off any optimization that is marked unsafe.
const cssnanoOptions = Object.assign(Object.create(null),
cssNanoDefaultOptions, opt_cssnano);
const cssnanoTransformer = cssnano({preset: ['default', cssnanoOptions]});
const css = fs.readFileSync(filename, 'utf8');
const transformers = [postcssImport, cssprefixer, cssnanoTransformer];
return postcss(transformers).process(css.toString(), {
'from': filename,
});
};
module.exports = (env, argv) => {
return merge(
config.getGlobalSettings(env, argv),
{
entry: config.getEntries('./**/*.scss', {
ignore: ['./**/_*.scss'],
cwd: './src/scss/'
}),
context: path.resolve(__dirname, 'src', 'scss'),
output: {
filename: '[name].css',
path: path.join(__dirname, 'web', 'css')
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({use: [
{loader: 'css-loader'},
{loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
autoprefixer(),
cssnano()
]
}
},
{loader: 'sass-loader'}
]})
}, {
test: /\.jpg|\.png|\.webp|\.woff|\.woff2$/,
use: [
{loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]
}]
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
})
]
}
);
};
gulp.task('components', function() {
return gulp.src('components/*-*.html')
.pipe(htmlMin({
removeComments: true,
preventAttributesEscaping: true,
collapseBooleanAttributes: true,
collapseWhitespace: true,
minifyJS: true
}))
.pipe(postCssHtml([
autoprefixer,
cssNano({safe: true})
]))
.pipe(gulp.dest('components'));
});
gulp.task('scss', function () {
var processors = [
autoprefixer({browsers: ['last 1 version']}),
cssnano(),
];
return gulp.src('./styles/main.scss')
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass({}))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('public/styles'))//to see when deploying
.pipe(gulp.dest('styles'))//to see while working
.pipe(browserSync.stream());
});
function css(opts) {
if (opts.postprocess) {
var processors = [
cssnext(),
cssnano({autoprefixer: false}),
];
} else { var processors = [] }
return gulp.src('_sass/main.sass')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('_site/css'));
}
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var mqpacker = require('css-mqpacker');
return gulp.src(cssFolder + '*.css')
.pipe(postcss([
mqpacker({
sort: true
}),
autoprefixer(),
cssnano()
]))
.pipe(gulp.dest(cssFolder));
});
function styles() {
var processors = [
cssnano({autoprefixer: {browsers: ['last 2 version'], add: true},
discardComments: {removeAll: true}})
];
return $.src('./src/assets/css/*')
.pipe($order([
"src/assets/css/*.css",
"src/assets/css/*.scss"]))
.pipe($changed('./build/dslab/css'))
.pipe($if(file => P.extname(file.path) === '.scss', $sass()))
.pipe($concat('style.css'))
.pipe($postcss(processors))
.pipe($.dest('./build/dslab/css'));
}
gulp.task('postcss', () => {
const processors = [
responsiveType,
size,
cssNext,
cssMqpacker,
cssNano({
autoprefixer: ['ie >= 10', '> 2% in RU']
}),
];
return gulp.src('src/postcss/style.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dist/css/'))
.pipe(browserSync.stream());
});
export default function(gulp, p, browserSync, options) {
const args = options.args
const config = options.config
const dirs = config.directories
const entries = config.entries
const dest = path.join(options.target, dirs.main, dirs.styles.replace('_', ''))
// autoprefixer support matrix
const supported = [
'last 2 version',
'> 5%',
'safari 5',
'ios 6',
'android 4'
]
// postcss configuration
const processors = (args.production) ? [
autoprefixer(supported),
cssnano({
safe: true
})
] : [
autoprefixer(supported)
]
// Sass
return (done) => {
gulp.src(path.join(dirs.source, dirs.styles, entries.css), {
base: path.join(dirs.source, dirs.styles)
})
.pipe(p.if(!args.production, p.sourcemaps.init()))
.pipe(p.sass({
outputStyle: 'expanded',
precision: 10
}))
.on('error', p.notify.onError(config.notification))
.pipe(p.postcss(processors))
.pipe(p.if(!args.production, p.sourcemaps.write('./')))
.pipe(gulp.dest(dest))
.on('end', () => {
browserSync.stream({
match: '**/*.css'
})
done()
})
}
}
function css(done) {
var processors = [
easyimport,
customProperties({preserve: false}),
colorFunction(),
autoprefixer({browsers: ['last 2 versions']}),
cssnano()
];
pump([
src('assets/css/*.css', {sourcemaps: true}),
postcss(processors),
dest('assets/built/', {sourcemaps: '.'}),
livereload()
], handleError(done));
}
gulp.task('sass', function () {
var processors = [
autoprefixer({ browsers: ['> 0%', 'last 2 versions'] }),
csswring,
cssnano({zindex : false}),
opacity,
];
return gulp.src(['assets/scss/*.scss', '!assets/scss/*.min.js'])
.pipe(plumber({ errorHandler: onError }))
.pipe(sass())
.pipe(rename({suffix:'.min'}))
.pipe(postcss(processors))
.pipe(gulp.dest('./css'))
.pipe(reload({stream:true}));
});
gulp.task('css', () => {
var processors = [
atImport,
cssnext({browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']}),
simplevars,
nestedcss,
mqpacker,
cssnano()
];
return gulp.src(`${destFolder}/css/style.css`)
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(plumber()
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(`${destFolder}/dist`)));
});
gulp.task("compile-sass", function(){
gulp.src("./src/scss/style.scss") // cargamos le archivo
.pipe(sourcemaps.init()) // comenzamos la captura de sourcemaps
.pipe(sass().on('error', sass.logError)) // compilamos el archivo SASS
.pipe(postcss([
autoprefixer(), // autoprefija automáticamente el CSS
cssnano() // minifica el CSS
]))
.pipe(sourcemaps.write('./')) // escribimos los sourcemaps
.pipe(gulp.dest("./dist/css/")) // guardamos el archivo en dist/css
.pipe(notify({
title: "SASS",
message: "Compiled 🤘"
}))
.pipe(browserSync.stream());
});
export async function styles() {
return gulp
.src('./src/clien*/styles/*.css', {
sourcemaps: true,
})
.pipe(postcss([
cssImport(),
cssNext(),
cssNano({
autoprefixer: false,
}),
]))
.pipe(gulp.dest('dist', {
sourcemaps: '.',
}));
}
function styles() {
return gulp.src(config.styles.sass)
.pipe(sourcemaps.init()) // Sourcemaps need to init before compilation
.pipe(sassGlob()) // Allow for globbed @import statements in SCSS
.pipe(sass()) // Compile
.on('error', sass.logError) // Error reporting
.pipe(postcss([
autoprefixer(), // Autoprefix resulting CSS
cssnano() // Minify
]))
.pipe(rename({ // Rename to .min.css
suffix: '.min'
}))
.pipe(sourcemaps.write()) // Write the sourcemap files
.pipe(gulp.dest(config.styles.dest)) // Drop the resulting CSS file in the specified dir
.pipe(browserSync.stream());
}
gulp.task('styles', () => {
return gulp.src(['app/less/*.less'])
.pipe($.changed('styles', {extension: '.less'}))
.pipe($.plumber({
errorHandler: err => {
console.log(err);
this.emit('end');
}
}))
.pipe($.less())
.pipe($.postcss([autoprefixer({browsers: AUTOPREFIXER_BROWSERS})]))
.pipe(gulp.dest('dest/css'))
.pipe($.postcss([cssnano()]))
.pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest('dest/css'))
.pipe($.size({title: 'styles'}));
});
gulp.task('dev:styles', function () {
return gulp.src(config.input.sass)
// .pipe(plugins.sourcemaps.init())
.pipe(plugins.sass.sync(config.sass).on('error', plugins.sass.logError))
.pipe(plugins.postcss([
cssnano(config.cssnano.dev),
autoprefixer(config.autoprefixer.dev)
]))
.pipe(plugins.header(banner, { pkg: pkg }))
// .pipe(plugins.sourcemaps.write(config.output.sourcemaps))
.pipe(plugins.debug({ title: 'Changed' }))
.pipe(gulp.dest(config.output.css)).on('error', log.error)
.pipe(plugins.postcss([rtlcss()]))
.pipe(plugins.rename({ suffix: '-rtl' }))
.pipe(plugins.debug({ title: 'RTLed' }))
.pipe(gulp.dest(config.output.css)).on('error', log.error);
});
gulp.task('css', function () {
var processors = [
mqpacker(),
cssnano(),
];
return gulp.src([
'./source/stylus/style.styl',
'./source/stylus/morph-content.styl'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(postCSS(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist/'))
.pipe(browserSync.stream());
});
gulp.task('build', function() {
var processors = [
autoprefix({browsers: ['last 2 version']}),
cssnano({
sourcemap: true
})
];
return gulp.src('./*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
//.pipe(csscomb())
//.pipe(cleancss())
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./dist'))
});
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(gulp.dest('assets/css/'))
.pipe(postcss([autoprefixer({
browsers: ['last 2 versions'],
cascade: false
})]))
.pipe(gulp.dest('assets/css/'))
.pipe(postcss([cssnano()]))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('assets/css/'));
});
function getPostCssPlugins (browsers) {
var plugins = [
autoprefixer({
browsers: browsers
}),
mqPacker({
sort: true
}),
pxtorem(pxtoremOptions)
];
if (argv.prod) {
plugins.push(cssNano());
}
return plugins;
}
gulp.task('style:build', function () {
var processors = [
atImport,
postcssShort,
postcssMixins,
postcssNested,
postcssVars,
postcssColor,
postcssAssets,
autoprefixer({browsers: ['last 2 version']}),
cssnano(), // разкомментить для минимайза
];
return gulp.src(path.src.style) //Выберем наш main.scss
.pipe(postcss(processors))
.pipe(gulp.dest(path.build.css)) //И в build
.pipe(reload({stream: true})); //И перезагрузим сервер
});
gulp.task('css', function () {
var processors = [
easyimport,
customProperties,
colorFunction(),
autoprefixer({browsers: ['last 2 versions']}),
cssnano()
];
return gulp.src('assets/css/*.css')
.on('error', swallowError)
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/built/'))
.pipe(livereload());
});
.then(() => {
let file = Path.join(__dirname, 'css/apostello.css');
let css = FS.readFileSync(file, 'utf8');
return PostCSS([
AtImport,
CSSnext({
features: {
rem: false
}
}),
CSSnano({
autoprefixer: false,
safe: true
})
]).process(css, { from: file });
})