Autoprefixer在Gulpfile.js中不起作用
Autoprefixer doesnt work inside Gulpfile.js
伙计们,我在我的gulp文件中添加了Autoprefixer插件,一切都很好,但CSS不会吐出Autoprefixer CSS。我很乐意得到帮助。下面是我的gulpfile.js:
// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
imagemin = require('gulp-imagemin'),
autoprefix = require('gulp-autoprefixer');
// scripts task
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js/'));
});
// styles task
gulp.task('styles', function() {
return gulp.src('./src/sass/*.scss')
.pipe(autoprefix('last 2 versions'))
.pipe(sass())
.pipe(gulp.dest('./dist/css/'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css/'));
});
// browser sync
gulp.task('browser-sync', ['styles'], function() {
browserSync({
server: {
baseDir: ''
},
notify: false
});
gulp.watch("./src/sass/*.scss", ['scss']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
var imgSrc = './src/img/**/*',
imgDst = './dist/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);
我希望你们能帮助我度过这个难关。
传递给autoprefixer
的config
错误。应该是
.pipe(autoprefix({
browsers: ['last 2 versions']
}))
参考:gulp-autoprefixer
在创建css后尝试初始化autoprefixer。
Autoprefixer对css进行修改。它不能处理sass文件。
更新
在复制新的gulpfile.js之前,在项目路径
中添加您的控制台cmdnpm install gulp-postcss autoprefixer es6-promise --save-dev
然后用autoprefixer复制新的gulpfile.js配置
// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
imagemin = require('gulp-imagemin');
// autoprefix = require('gulp-autoprefixer'); -- comment this line
// scripts task
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js/'));
});
// styles task
gulp.task('styles', function() {
return gulp.src('./src/sass/*.scss')
// .pipe(autoprefix('last 2 versions')) -- comment this line
.pipe(sass())
.pipe(gulp.dest('./dist/css/'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css/'));
});
// =========================================
// Start - Add packages / new configurations
require('es6-promise').polyfill();
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('autoprefixer', function () {
return gulp.src(
['.dist/css/*.css', '!.dist/css/*.min.css']
)
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('.dist/css/'));
});
// =========================================
// End new lines
// browser sync
gulp.task('browser-sync', ['styles'], function() {
browserSync({
server: {
baseDir: ''
},
notify: false
});
gulp.watch("./src/sass/*.scss", ['scss']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
var imgSrc = './src/img/**/*',
imgDst = './dist/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);
之后尝试在cmd控制台中写入
gulp autoprefixer
问候:)
相关文章:
- Js.erb VS按钮标记-不'不起作用.为什么?
- 为什么indexOf在这个js代码中不起作用
- 淘汰赛.JS'启用'长度绑定条件不起作用
- JS动态添加字段-删除按钮不起作用
- Knockout.JS标签在foreach内部不起作用
- 角度 JS + 重定向不起作用
- JS中的乘法不起作用
- Angular js+ng repeat+字母数字索引不起作用
- 角度Js ng-disabled不起作用
- 路径 lo 加载本地主机子文件夹中的文件不起作用.js仅在基路径中
- Jquery Carousel 不起作用(JS 问题)
- 验证方法在主干网中不起作用.js
- 应用程序.js在骨干中不起作用.js + 要求.js
- 路由在角度下不起作用.js - 没有控制台或语法错误
- Int from for 循环在函数中不起作用 - JS
- 为什么代码不起作用JS
- 为什么这个代码在iPad Pro上不起作用?(JS)
- .将Integer推入数组不起作用JS/JQuery
- 我的下拉列表不起作用-JS有问题
- Bootstrap弹出,粘贴不起作用.JS加载问题