Closed kang-lyk closed 8 years ago
`var gulp = require('gulp'), fileinclude = require('gulp-file-include'), requireDir = require('require-dir'); var updateRule = require('postcss-sprites/lib/core').updateRule; var baseUrl = 'http://static.eelly.com/'; gulp.task('css', function () {
var postcss = require('gulp-postcss'), postcssArr = [ require('autoprefixer')({ browsers: ['last 2 versions', 'Android >= 4.0'], cascade: false, //是否美化属性值 默认:true 像这样: //-webkit-transform: rotate(45deg); //transform: rotate(45deg); remove:true //是否去掉不必要的前缀 默认:true }), require('precss'), require('postcss-sprites')({ stylesheetPath:'./src/css/', spritePath:'./src/images/', basePath:baseUrl, relativeTo: 'rule', spritesmith:{ padding:10 }, filterBy: function(image) { // Allow only png files if (!/icon\-/.test(image.url)) { return Promise.reject(); } return Promise.resolve(); }, hooks: { onUpdateRule: function(rule, token, image) { // Use built-in logic for background-image & background-position updateRule(rule, token, image); ['width', 'height'].forEach(function(prop) { rule.insertAfter(rule.last, postcss.decl({ prop: prop, value: image.coords[prop] + 'px' })); }); } } }), require('postcss-assets')({ loadPaths: ['./src/images/','../images'], baseUrl: baseUrl, cachebuster: true }) ]; return gulp.src(['src/**/*.css','!src/**/_*.css']) .pipe( postcss(postcssArr)) .pipe( gulp.dest('dist/'));
});`
It's not a function because you use gulp-postcss instead of postcss. Please use the code block below.
gulp-postcss
postcss
var gulpPostcss = require('gulp-postcss'); var postcss = require('postcss');
`var gulp = require('gulp'), fileinclude = require('gulp-file-include'), requireDir = require('require-dir'); var updateRule = require('postcss-sprites/lib/core').updateRule; var baseUrl = 'http://static.eelly.com/'; gulp.task('css', function () {
});`