首页 > 代码库 > postcss使用
postcss使用
准备
构建工具为Gulp
基于PostCSS
PostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器
PostCSS插件 Autoprefixer 为CSS补全浏览器前缀
PostCSS插件 CSS Grace 让CSS兼容旧版IE
package.json
"devDependencies": { "autoprefixer": "^7.1.1", "browser-sync": "^2.18.8", "compass": "^0.1.1", "gulp": "^3.9.1", "gulp-changed": "^2.0.0", "gulp-compass": "^2.1.0", "gulp-html-beautify": "^1.0.1", "gulp-load-plugins": "^1.5.0", "gulp-plumber": "^1.1.0", "gulp-postcss": "^7.0.0", "gulp-pug": "^3.3.0", "gulp-sass": "^3.1.0", "gulp-sourcemaps": "^2.6.0", "precss": "^1.4.0", "pug": "^2.0.0-beta.12", "cssgrace": "^3.0.0" }, "dependencies": { "express": "^4.15.2", "pug": "^2.0.0-beta.12" }
gulpfile.js
var gulp = require("gulp"); var plugins = require("gulp-load-plugins")(); var browserSync = require("browser-sync").create(); var postcss = require(‘gulp-postcss‘); var sourcemaps = require(‘gulp-sourcemaps‘); var cssgrace = require(‘cssgrace‘); // /*执行命令行工具*/ // var exec = require(‘child_process‘).exec; // exec("node server/index.js", function(err, stdout, stderr) { // var status = err ? -1 : 1, // cmd_result = err ? stderr : stdout; // // 可以获取到错误信息、标准输出和标准错误输出,接下来继续处理吧 // }); //编译pug gulp.task("pug:compile",function() { gulp.src("src/*.pug") .pipe(plugins.plumber()) .pipe(plugins.changed("./build/",{extension:".html"})) .pipe(plugins.pug({ pretty:"\t" })) .pipe(plugins.htmlBeautify({ indent_size:4, indent_char:" " })) .pipe(gulp.dest("./build/")) }) //监控pug gulp.task("pug:watch",function() { gulp.watch("src/*.pug",["pug:compile"]) }) //编译pug-templates gulp.task(‘pug-templates:compile‘,function(){ gulp.src(‘src/*.pug‘) .pipe(plugins.plumber()) .pipe(plugins.pug({ pretty: ‘\t‘ })) .pipe(plugins.htmlBeautify({ indent_size: 4, indent_char: ‘ ‘, unformatted: true, extra_liners: [] })) .pipe(gulp.dest(‘./build/‘)); }); //监控pug-templates gulp.task(‘pug-templates:watch‘,function(){ gulp.watch(‘src/templates/*.pug‘,[‘pug-templates:compile‘]); }); /*编译compass*/ gulp.task("compass:compile",function() { gulp.src("src/sass/sass_parts/*.scss") .pipe(plugins.plumber()) .pipe(plugins.compass({ config_file:"./src/sass/config.rb", sass:"src/sass/sass_parts", css:"src/sass/stylesheets" })) .pipe(sourcemaps.init()) .pipe( postcss([ require(‘precss‘), require(‘autoprefixer‘), cssgrace ]) ) .pipe( sourcemaps.write(‘.‘) ) .pipe(gulp.dest("./build/css")); }) //监控compass sass gulp.task("compass:watch",function() { gulp.watch("src/sass/sass_parts/**/*.scss",["compass:compile"]); }); //browser-sync gulp.task("browser-sync",function() { var files = [ "./build/*.html", "./build/**/*.css", "./build/**/*.js" ]; browserSync.init(files,{ server:{ baseDir:"./build" }, port:3061 }) }) gulp.task("default",["pug:watch","pug-templates:watch","compass:watch","browser-sync"])
src结构目录
postcss使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。