JetBrains WebStorm中的CSS AutoPrefixer

Question

我正在编写带有.sass文件扩展名的Sass，并使用JB的文件观察器插件。

默认情况下，它不使用自动修复程序，而且我找不到任何提供该功能的包。

如何使用文件监视器或其他方法在WebStorm中为我的.css文件获取自动修复程序？

Answer 1

我不相信IDE中内置了任何自动修复程序。我使用pycharm (和webstorm差不多)。

https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000149090-Autoprefixer

我使用gulp自动重定位.sass并编译css。

您可以通过添加一个插口文件并在以下mannor中实现该文件来完成此操作：

Variables: ----------------------------------------------------

*/

var autoprefixer = require('gulp-autoprefixer');

然后运行任务：

SCSS / CSS：

*/

gulp.task('sass', function () {
    return gulp.src(STYLES_SRC_FILES)
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer('last 3 version'))
      .pipe(gulp.dest(STYLES_DEST_PATH))
      .pipe(cleanCSS({debug: true}, function(details) {
        console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
        console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
      }))
      .pipe(renameFiles({ suffix: '.min' }))
      .pipe(gulp.dest(STYLES_DEST_PATH));
  });

Answer 2

是，您当前的项目文件夹

​

​

您可能需要全局安装gulp，即

npm install gulp-cli -g

然后将gulpfile添加到您的项目中，然后运行：

gulp 

对于windows npx吞噬

我的示例gulpfile如下所示：

/*

Variables: ----------------------------------------------------

*/

var gulp         = require('gulp'),
    uglify       = require('gulp-uglify'),
    renameFiles  = require('gulp-rename'),
    sass         = require('gulp-sass'),
    concat       = require('gulp-concat'),
    cleanCSS     = require('gulp-clean-css'),
    gutil        = require('gulp-util'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer');

/*

Paths: -------------------------------------------------

*/

var SRC_PATH = './your_project_name/src/',
    DEST_PATH = './your_project_name/static/',

// Style paths
    STYLES_SRC_FILES = SRC_PATH + 'scss/**/*.scss',
    STYLES_DEST_PATH = DEST_PATH + 'css/',

// JS paths
    JS_SRC_FILES = SRC_PATH + 'js/**/*.js',
    JS_DEST_PATH = DEST_PATH + 'js/';

/*

SCSS / CSS: -------------------------------------------------

*/

gulp.task('sass', function () {
    return gulp.src(STYLES_SRC_FILES)
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer('last 3 version'))
      .pipe(gulp.dest(STYLES_DEST_PATH))
      .pipe(cleanCSS({debug: true}, function(details) {
        console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
        console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
      }))
      .pipe(renameFiles({ suffix: '.min' }))
      .pipe(gulp.dest(STYLES_DEST_PATH));
  });

/*

JS: -------------------------------------------------

*/

gulp.task('js', function () {
    return gulp.src(JS_SRC_FILES)
        .pipe(concat('main.js'))
        .pipe(gulp.dest(JS_DEST_PATH))
        .pipe(uglify().on('error',gutil.log))
        .pipe(sourcemaps.write('./'))
        .pipe(renameFiles({ suffix: '.min' }))
        .pipe(gulp.dest(JS_DEST_PATH));
});

/*

Default Task: ----------------------------------------------------- Default Task

*/

gulp.task('watch', function () {
  gulp.watch(STYLES_SRC_FILES, gulp.series('sass'));
  gulp.watch(JS_SRC_FILES, gulp.series('js'));
});

gulp.task('default', gulp.series('sass', 'js', 'watch'));

这将编译静态css文件夹中的自动重修复的css，并保持scss文件的整洁

如果使用上面的示例，您将需要安装所有的gulp任务依赖项，即

npm install gulp-autoprefixer --save