如何使用gulp解决内核前缀问题

Question

我是Windows系统，按步骤装好了node.js gulp autoprefixer，不知道怎么用这个工具让我的css代码自动解决内核前缀，在下小白刚入门，求大神指点，我用的是webstorm，如果能在这个工具之上回答更好，感谢！

Answer 1

使用gulp的插件的话，一般是在nam package里搜gulp-xxxx。例如autoprefixer的话是 https://www.npmjs.com/package/gulp-autoprefixer

安装

$ npm install --save-dev gulp-autoprefixer

在gulpfile.js中配置

ar gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
 
gulp.task('default', function () {
    return gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'));
});

gulp.src('src/app.css')是需要自动去处理内核前缀的css文件，如果有多个可以写成array放到src方法中。
pipe(autoprefixer)部分是配置autoprefixer处理，此处不用改
pipe(gulp.dest('dist'))是配置自动处理过内核前缀的css输出的位置，根据实际情况修改

最后CLI执行gulp命令即可运行default task。或者你可以把task名字改掉，例如写成

gulp.task('autoprefixer', ...

然后CLI下执行 gulp autoprefixer