标签：npm pipe 兼容性 sass cnpm gulp install css

一、大前提，你必须安装必备的环境

　　node.js

　　安装cnpm解决下载卡顿

　　　　命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　查看官网api：https://www.gulpjs.com.cn/docs/getting-started/quick-start/

　　安装gulp

　　　　查看官网api：npm install --global gulp-cli

　　　　查看官网api：https://www.gulpjs.com.cn/docs/getting-started/quick-start/

　　查看环境

二、开始：

cnpm init
cnpm install --save-dev gulp
cnpm install --save gulp-sass
cnpm install --save gulp-autoprefixer

创建gulpfile.js文件

let gulp = require('gulp'),
    sass = require('gulp-sass'),//sass转css插件
    auto = require('gulp-autoprefixer');//解决浏览器兼容问题的插件
gulp.task('sass', function(){
    return gulp.src('sass/*')//需要编译的文件目录
        .pipe(sass({outputStyle:'compressed'}).on('error',sass.logError))
        .pipe(auto({//处理兼容
            browsers:['last 2 version'],
            cascade:false
        }))
        .pipe(sass())//开始编译
        .pipe(gulp.dest('css'));//存放编译之后的目录
});

// exports.default = function(){}

使用gulp sass运行（此处的sass对应的就是gulpfile.js文件中的task指令）

 结果:

标签：npm,pipe,兼容性,sass,cnpm,gulp,install,css
来源： https://www.cnblogs.com/zhizou/p/11751591.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。