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

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

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


使用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

【热门文章】
【热门文章】