gulp.task('styles', function(cb) {
var processors = [
autoprefixer({
browsers: ['> 10%', 'IE 11']
}),
// mqpacker,
csswring,
cssnext()
];
return gulp.src([
'./public/src/css/reset.css',
'./public/src/css/base.css',
'./public/src/css/fonts.css',
'./public/src/css/menu.css',
'./public/src/css/slider.css',
'./public/src/css/status.css',
'./public/src/css/forms.css',
'./public/src/css/settings.css',
'./public/src/css/footer.css'
])
.pipe(concat('style.css'))
.pipe(postcss(processors))
.pipe(cssnano())
.pipe(gulp.dest('./public/dist/css/'))
.pipe(notify({
message: 'styles task complete'
}));
});
compile = function() {
var meta = [
'/*',
'',
' Basscss v' + pkg.version,
' ' + pkg.description,
' http://basscss.com',
'',
'*/',
''
].join('\n');
var dir = path.join(__dirname, '../src/');
var dest = path.join(__dirname, '../css/');
var src = fs.readFileSync(dir + 'basscss.css', 'utf8');
var css = cssnext(src, {
features: {
customProperties: {
strict: false, // disable variable fallbacks from being redundantly added
},
rem: false
}
});
css = meta + '\n\n' + postcss().use(removeComments()).process(css).css;
//css = meta + '\n\n' + css;
var minified = new Cleancss().minify(css).styles;
fs.writeFileSync(dest + 'basscss.css', css);
fs.writeFileSync(dest + 'basscss.min.css', minified);
console.log('Compiled to css/basscss.css and css/basscss.min.css');
};
return function duoCssnext(file) {
if (file.type !== "css") {
return
}
options.from = file.path
file.src = cssnext(file.src, options)
}
compile = function() {
var dir = path.join(__dirname, '../src/')
var dest = path.join(__dirname, '../css/')
var src = fs.readFileSync(dir + 'basscss.css', 'utf8')
var css = cssnext(src, {
features: {
customProperties: {
strict: false, // disable variable fallbacks from being redundantly added
},
rem: false,
pseudoElements: false,
colorRgba: false
}
})
css =
postcss()
.use(removeComments())
.use(removeRoot())
.process(css)
.css
var minified = new Cleancss({
advanced: false,
}).minify(css).styles
var stats = cssstats(css)
console.log('Size: ' + filesize(stats.size))
console.log('Gzipped: ' + filesize(stats.gzipSize))
console.log('Rules: ' + stats.rules.length)
console.log('Selectors: ' + stats.aggregates.selectors)
console.log('Declarations: ' + stats.aggregates.declarations)
css =
[
'/*',
'',
' Basscss v' + pkg.version,
' ' + pkg.description,
' http://basscss.com',
'',
' ' + filesize(stats.size),
' ' + filesize(stats.gzipSize) + ' Gzipped',
' ' + stats.rules.length + ' Rules',
' ' + stats.aggregates.selectors + ' Selectors',
' ' + stats.aggregates.declarations + ' Declarations',
' ' + stats.aggregates.properties.length + ' Properties',
'',
'*/',
'',
'',
css
].join('\n')
fs.writeFileSync(dest + 'basscss.css', css)
fs.writeFileSync(dest + 'basscss.min.css', minified)
console.log('Compiled to css/basscss.css and css/basscss.min.css')
}
gulp.task('css', function () {
return gulp.src('src/css/style.css')
.pipe(plumber())
.pipe(postcss([
cssnext(),
csswring
]))
.pipe(gulp.dest(distPath))
})
modules.forEach(function(m) {
var css = '@import "' + m + '";';
var imported = cssnext(css, cssnextOpts);
var scss = cssscss(imported);
var filename = '_' + m.replace('basscss-', '') + '.scss';
fs.writeFileSync(filename, scss);
});
gulp.task('css', function () {
var processors = [
nested,
cssnext(),
cssshort(),
cssnano(),
];
return gulp.src('./style/inStyle.css')
.pipe(postcss(processors))
.pipe(rename('main.css'))
.pipe(gulp.dest('./style/'));
});
gulp.task('styles',function () {
var processors = [
cssnext({}),
rucksack,
lost,
];
return gulp.src('../src/css/style.styl')
//.pipe(stylus({use:[nib()]}))
.pipe(stylus())
.pipe(postcss(processors))
.pipe(gulp.dest('../src/css/'));
});
postcss: function () {
return [
cssimport({
// see postcss-import docs to learn about onImport callback
// https://github.com/postcss/postcss-import
path: spec.stylePath,
onImport: function (files) {
files.forEach(this.addDependency)
}.bind(this)
}),
cssnext()
]
},
function plugins(root) {
if (_plugins) return _plugins
var np = node_path(root)
debug('plugin NODE_PATH=%s', np)
_plugins = [
cssimport({ path: np ? np : [], glob: true, root: root }),
cssnext({ import: false }),
nested(),
vars()
]
return _plugins
}
postcss: function() {
return {
defaults: [
cssimport({
// Add each @import as a dependency so the bundle is rebuilt
// when imported files change.
onImport: function (files) {
files.forEach(this.addDependency);
}.bind(this)
}),
cssnext(),
autoprefixer
],
cleaner: [autoprefixer({ browsers: ["last 2 versions"] })]
};
},
gulp.task('styles-next', function () {
var processors = [
selector(),
calc(),
cssnext()
];
gulp.src("next/knacss.css")
.pipe(postcss(processors))
.pipe(sourcemaps.init())
.pipe(rename('knacss-unminified.css'))
.pipe(gulp.dest('./css'))
.pipe(rename('knacss.css'))
.pipe(minifycss({keepBreaks:false,keepSpecialComments:0}))
.pipe(sourcemaps.write('.', {includeContent: false}))
.pipe(gulp.dest('./css'));
});
gulp.task('css', function() {
var processors = [
autoprefixer({browsers: ['last 2 version']}),
mqpacker,
lost,
cssnext()
];
return gulp.src(config.src)
.pipe(sourcemaps.init())
.pipe(sass()).on('error', errors)
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.dest))
.pipe(sync.stream({match: '**/*.css'}));
});
gulp.task('postcss', function () {
var processors = [
autoprefixer({browsers: ['ie >= 8', 'ie_mob >= 10', 'ff >= 20', 'chrome >= 24', 'safari >= 5', 'opera >= 12', 'ios >= 7', 'android >= 2.3', '> 1%', 'last 4 versions', 'bb >= 10']}),
mqpacker,
csswring,
cssnext()
];
return gulp.src(paths.styles.dest + '**/*.css')
.pipe(customPlumber('Error Compiling PostCSS'))
.pipe(plugins.newer(paths.styles.dest))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.postcss(processors))
.pipe(plugins.sourcemaps.write('maps', {includeContent: true}))
.pipe(gulp.dest(paths.styles.dest))
.pipe(plugins.size({showFiles: true, title: 'task:postcss'}));
});
postcss: function () {
return [
postcssImport({
onImport: function (files) {
files.forEach(this.addDependency);
}.bind(this),
}),
cssnext({
features: {
'browers': ['> 10%, last 2 versions, ie >= 9, not opera >= 33'],
},
}),
postMixins,
postNested,
];
},
function processCSS (src, out, done) {
const css = fs.readFileSync(src, 'utf8')
if (!css) {
throw new Error('Could not find file ' + src)
}
const ws = fs.createWriteStream(out)
const output = cssnext(css, {
from: src,
plugins: [
// require('postcss-import')
]
})
ws.on('finish', function () { done() })
ws.write(output)
ws.end()
}
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('styles', () => {
const postcssPlugins = [
cssnext({
messages: {
browser: false,
console: false,
},
}),
postcssImport(),
// postcssBem,
postcssClearfix,
postcssNested,
postcssHexrgba,
postcssResponsiveType,
postcssEasings,
lost,
postcssReporter({
clearMessages: true,
})
];
return gulp.src(SRC + 'styles/styles.css')
/*.pipe($.changed(DEST + 'styles', {extension: '.css'}))*/
/*.pipe($.sourcemaps.init())*/
.pipe($.plumber())
.pipe($.postcss(postcssPlugins))
.pipe($.replace('../../node_modules/font-awesome/fonts/fontawesome-webfont', '../fonts/font-awesome/fontawesome-webfont'))
.pipe($.if(RELEASE, $.uncss({
html: [DEST + 'index.html'],
})))
.pipe($.if(RELEASE, $.replace('/*!', '/*'))) // remove special comments
.pipe($.if(RELEASE, $.stripCssComments())) // remove comments
.pipe($.if(RELEASE, $.cssnano())) // minify
.pipe($.size({title: 'styles'}))
/*.pipe($.sourcemaps.write('.'))*/
.pipe($.if(RELEASE, $.rev()))
.pipe(gulp.dest(DEST + '/styles'))
.pipe($.if(RELEASE,
$.rev.manifest(SRC + 'data/rev-manifest.json', {
base: DEST,
merge: true
})
))
.pipe($.if(RELEASE, gulp.dest(DEST)))
.pipe($.if(!RELEASE, reload({stream: true})));
});
gulp.task('testLess', function () {
var processors=[
autoprefixer({browsers:['last 3 version'],cascade:false,remove:false}),
cssnext(),
cssgrace
];
//当less有各种引入关系时，编译后不容易找到对应less文件，所以需要生成sourcemap文件，方便修改
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(sourcemaps.init())
.pipe(less()) //该任务调用的模块
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css')) //将会在src/css下生成index.css
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())//兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))
.pipe(gulp.dest('dist/css'))
.pipe(notify({message:'testLess task complete'}));
});
CssnextFilter.prototype.processString = function(str, relativePath) {
var options = xtend({
from: this.options.from || path.join(this._srcDir, relativePath)
}, this.options);
if (options.map) {
options.map.inline = true;
}
var result = cssnext(str, options);
if (typeof result === 'string') {
return result;
}
var css = result.css;
if (result.map) {
css += '\n' + result.map;
}
return css;
};
return function(file, enc, cb){
var contents
var transformed
if(file.isStream()) {
return cb(
new PluginError("gulp-cssnext", "streaming not supported")
)
}
if(file.isBuffer()) {
contents = file.contents.toString()
try {
options.from = options.from === undefined ? (file.path !== null ? file.path : undefined) : options.from
transformed = cssnext(contents, options)
}
catch(err) {
return cb(
new PluginError("gulp-cssnext", err)
)
}
file.contents = new Buffer(transformed)
cb(null, file)
}
}
.forEach(function(file) {
var outFile = path.join(metalsmith.destination(), file)
var plugins = [
cssnext(),
autoprefixer(),
pixrem(),
mixins(),
nested(),
cssnano()
]
postcss(plugins)
.process(files[file].contents.toString(), {from: file})
.then(function (result) {
delete files[file]
files[outFile] = {
contents: new Buffer(result.css)
}
if (--count === 0) {
done()
}
})
})
CssnextCompiler.prototype.build = function() {
var destFile = this.outputPath + '/' + this.outputFile
mkdirp.sync(path.dirname(destFile))
var from = includePathSearcher.findFileSync(this.inputFile, this.inputPaths)
var dir = path.dirname(from)
var cssnextOptions = {
from: this.inputFile,
import: { root: dir, path: [ dir ] },
path: [ dir ]
}
merge(cssnextOptions, this.cssnextOptions)
var data = fs.readFileSync(from, 'utf8')
var output = cssnext(data, cssnextOptions)
fs.writeFileSync(destFile, output, { encoding: 'utf8' })
if (output.map) {
fs.writeFileSync(destFile + '.map', output.map, { encoding: 'utf8' })
}
}
preLoaders: [
{test: /\.js$/, loader: 'eslint', exclude: /node_modules/}
],
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.json$/, loader: 'json' },
{ test: /\.css$/, loader: 'style!css!postcss' },
{ test: /\.(png|jpg)$/, loader: 'url?limit=8192' },
{ test: /\.(ttf|eot|svg)/, loader: 'file' },
{ test: /\.woff(2)?/, loader: 'url?limit=10000&minetype=application/font-woff' }
]
},
postcss: [
nested,
cssnext({
browsers: ['last 1 version', '> 2%'],
import: {
root: 'styles'
}
})
// cssgrace // Wait fix https://github.com/cssdream/cssgrace/issues/29
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'file?name=[sha512:hash:base64:7].[ext]!image?optimizationLevel=7&progressive&interlaced'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?browsers=last 2 version!sass')
}
]);
config.postcss = [
cssnext({browsers: 'last 2 versions'})
];
config.plugins = [
// extract css
new ExtractTextPlugin('[name]-[chunkhash].css'),
// set env
new webpack.DefinePlugin({
'process.env': {
BROWSER: JSON.stringify(true),
NODE_ENV: JSON.stringify('production')
}
}),
// optimizations
var fs = require('fs');
var path = require('path');
var assert = require('assert');
var cssnext = require('cssnext');
var processors = require('./processors');
var scss = require('./scss');
//var usage = require('./doiuse');
var src = fs.readFileSync(path.join(__dirname, '../src/basscss.css'), 'utf8');
var css = cssnext(src);
describe('basscss', function() {
processors(src);
scss();
//usage(css);
});
it('should be the same as css3', function() {
var result = cssnext(stylesheets.defaults);
assert.equal(stylesheets.css3.trim(), result.trim());
});
assert.doesNotThrow(function() {
var result = cssnext(stylesheets.defaults);
});
assert.doesNotThrow(function() {
css = cssnext(src)
})
entry: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
'./src/main.js'
],
output: {
path: './build',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.jsx', '.js', '.css'],
modulesDirectories: ["src", "node_modules"]
},
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style!css!postcss' }
]
},
postcss: [
cssnext({
import: {
path: ['node_modules', 'src/css']
}
})
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};