Gulp компилирует несколько файлов scss / js - PullRequest
Новая
       12

Gulp компилирует несколько файлов scss / js

0 голосов
/ 07 октября 2019

Я впервые использую Gulp, и меня немного смущает то, что я делаю неправильно, моя структура выглядит следующим образом: 

assets
   -> resources
   -> dist
      -> main.css
   -> src
      -> scss/bootstrap
      -> scss/main.scss

      -> js/bootstrap
      -> js/main.js

Моя цель - создать файл gulp, который будетскомпилируйте и мой JavaScript, и мой SCSS и выведите их в "main.css" и "main.js" в /dist.

console.log('Starting compiling process...');

const gulp = require('gulp');
const jsmn = require('gulp-uglify');
const sass = require('gulp-sass');

let src         = './resources/src';
let dist        = './resources/dist';
let bootstrap   = './node_modules/bootstrap';
let custom      = './resources/src/scss';

//Configure options
let scss = {
    in: [src + 'scss/*'],
    out: dist,
    watch: src + '/scss/*',
    watchjs: src + '/js/*.js',
    sassOps: {
        outputStyle: 'compressed',
        precision: 3,
        errLogToConsole: true,
        includePaths: [bootstrap + '/scss']
    }
};

//Default task
gulp.task('compile', function() {
    return gulp.src(scss.in)
        .pipe(sass(scss.sassOps))
        .pipe(gulp.dest(scss.out));
});

gulp.task('compress', function() {
    return gulp.src([src + '/js/*.js'])
        .pipe(jsmn())
        .pipe(gulp.dest(dist));
});

gulp.task('watch', function() {
    gulp.watch([scss.watchjs, scss.watch], gulp.parallel('compile', 'compress'));
});

Сейчас он компилирует мой Javascript, хотя SCSS является проблемой ...

Ответы [ 2 ]

0 голосов
/ 07 октября 2019

Задача Gulp для компиляции вашего scss, добавления префиксов браузеров, замены URL-адресов, используемых в исходных файлах, минимизирования и вывода их в "main.css" в /dist.

/* ------------------------------------
Process CSS
------------------------------------ */
gulp.task('processCss', function () {
    return gulp.src('scss/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename('main.css')) // will be prefixed and minified
        .pipe(replace('url("../../', 'url("../'))
        .pipe(stripCssComments({preserve: false}))
        .pipe(gulp.dest('dist'));
});

И эта задача состоит в том, чтобы скомпилироватьваши js-файлы, сократите и выведите их в файл "main.js" в /dist.

gulp.task('processFooterJs', function () {
    return gulp.src('js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())   // will be compressed
        .pipe(gulp.dest('dist'));
});

. Пожалуйста, используйте npm для установки этих зависимостей 

gulp-autoprefixer
gulp-concat
gulp-strip-css-comments
gulp-uglify
gulp-rename
gulp-replace

и импортируйте их в верхнюю частьВаш файл выглядит так: 

    var autoprefixer = require('gulp-autoprefixer'),
        concat = require('gulp-concat'),
        stripCssComments = require('gulp-strip-css-comments'),
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        replace = require('gulp-replace');

И это будет сделано:)

Если у вас есть несколько источников для ваших файлов js, исключите необходимость импортировать jquery.js из узловых модулей и индекса. js из папки js ваша задача будет выглядеть так: 


/* ------------------------------------
Process JS for footer
------------------------------------ */
gulp.task('processFooterJs', function () {
    return gulp.src([    ,
        'node_modules/jquery/dist/jquery.min.js',
        'js/index.js',
    ])
      .pipe(concat('main.js'))
        .pipe(uglify())  
        .pipe(gulp.dest('dist'));
});

Я надеюсь, что это может помочь вам, наилучшие пожелания:)

0 голосов
/ 07 октября 2019

если у вас есть несколько файлов SCSS / JS, вам нужно будет использовать gulp concat , чтобы объединить все файлы в один файл.

это то, что я использую для создания моего файла CSS из несколькихSCSS файл 

// styles
gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Также я предлагаю использовать Gulp Autoprefixer , а также

...