Gulp: Скомпилируйте SASS в CSS в той же папке - PullRequest
Новая
       17

Gulp: Скомпилируйте SASS в CSS в той же папке

5 голосов
/ 26 марта 2020

Я пытаюсь настроить модульный рабочий процесс, при котором при запуске gulp он будет компилировать файлы SASS в папку в CSS. Эти новые CSS файлы будут храниться в той же папке.

Например, вот моя текущая структура папок: 

theme
   - modules
      - hero
         - hero.html
         - hero.scss

Вот мой 'gulpfile. js': 

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

gulp.task( 'sass', function() {
    return gulp.src('modules/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('modules/**/*.css'))
});

Однако, когда я запускаю gulp sass, моя структура папок выглядит следующим образом: 

theme
   - **
      - *.css
         - hero
            - hero.css
   - modules
      - hero
         - hero.html
         - hero.scss

Тогда как я ищу: 

theme
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (hero.css to appear here after running gulp)

Я далеко?

Ответы [ 3 ]

1 голос
/ 26 марта 2020

Если я правильно понимаю, вы хотите вернуть .css файл, где .scss файл существует. Вот код gulpfile.js. 

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}
function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {

    scss()

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

package.json требуется файл devDependencies и browserlist. это будет так. 

"devDependencies": {
    "autoprefixer": "^9.7.4",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2"
  },
  "browserslist": [
    "last 71 version"
  ],

используйте $ gulp watch для выполнения вашей задачи.

Структура вашей папки такая же 

Themes
    modules
        hero
            hero.html
            hero.scss
        header
            header.html
            header.scss
        footer
            footer.html
            footer.scss
    package.json
    gulpfile.js

Будет возвращено 

Themes
    modules
        hero
            hero.html
            hero.css
            hero.scss
        header
            header.html
            header.css
            header.scss
        footer
            footer.html
            footer.css
            footer.scss
    package.json
    gulpfile.js

Надеюсь, эта помощь!

1 голос
/ 26 марта 2020

gulp.dest() хочет только путь, затем он добавит к нему текущий путь к файлу. И sass() уже изменит расширение на css, так что это тоже не должно быть проблемой. Так что в вашем случае это должно работать следующим образом. 

gulp.task('sass', function() {
    return gulp.src('modules/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('modules/'));
});
0 голосов
/ 26 марта 2020

gulp.src сообщает задаче Gulp, какие файлы использовать для задания,

, в то время как gulp.dest указывает Gulp, куда выводить файлы после завершения задания.

Так что в вашем на случай, если это будет работать так 

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

gulp.task( 'sass', function() {
    return gulp.src('modules/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('modules/**'))
});
...