zoukankan      html  css  js  c++  java
  • postcss gulp 安装使用

    备注:
       测试使用的是gulp 进行的编译
    1. 项目初始化
    npm init
    
    mkdir src
    
    touch app.css
    
    body{
        display: flex;
    }
    2. 安装(gulp 、gulp-postcss 以及几个依赖)
    npm install -g gulp-cli 
    npm install  gulp-postcss --save-dev
    npm install gulp --save-dev
    npm install  autoprefixer --save-dev
    npm install cssnano --save-dev
    3. gulpfile.js 定义
    var postcss = require('gulp-postcss');
    var gulp = require('gulp');
    var autoprefixer = require('autoprefixer');
    var cssnano = require('cssnano');
     
    gulp.task('css', function () {
        var plugins = [
            autoprefixer({browsers: ['last 1 version']}),
            cssnano()
        ];
        return gulp.src('./src/*.css')
            .pipe(postcss(plugins))
            .pipe(gulp.dest('./dest'));
    });
    4. post.config.js 定义(可选,如果上面的gulpfile 没有使用autoprefixer 就需要)
    module.exports = {
        plugins: [
            require('autoprefixer')
        ]
    }
    备注:
    不需要使用postcss.config.js 的gulpfile.js
    
    var postcss = require('gulp-postcss');
    var gulp = require('gulp');
     
    gulp.task('css', function () {
        return gulp.src('./src/*.css')
            .pipe(postcss())
            .pipe(gulp.dest('./dest'));
    });
    5. 使用
    gulp css
    6. 输出信息
    ./dist/app.css
    
    body{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    7. 参考资料
    https://www.npmjs.com/package/gulp-postcss
    https://github.com/postcss/postcss
  • 相关阅读:
    Python-内存管理
    Python如何操作Excel
    336. 文本压缩
    Python-锁
    MVC接收以post形式传输的各种参数
    linux批量替换指定文件夹中所有文件的指定内容
    ES6:string.raw浅析
    node学习笔记
    运行node提示:events.js:160 throw er; // Unhandled 'error' event
    socket.io入门示例参考
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/8143200.html
Copyright © 2011-2022 走看看