• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Gulp - podstawy

0 głosów
165 wizyt
pytanie zadane 15 marca 2017 w Systemy operacyjne, programy przez Bakr Mądrala (6,740 p.)

Witam,

Zainstalowałem pakiety: sass oraz browser-sync.

Problem polega na tym, że po wykonaniu komendy gulp w terminalu odpala się Browser Sync, ale gdy wprowadzę zmiany w plikach SCSS, to zmiany nie pojawiają się na stronie. Nawet po odświeżeniu strony zostaje stara wersja. 

Aby zauważyć zmiany muszę zakończyć akcję w terminalu i wykonać ją ponownie.

 

Plik gulpfile.js

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

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'))
});

gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
});
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('sass', function () {
        gulp.src('sass/**/*.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('css'));
});

gulp.task('browser-sync', function() {
    browserSync.init(["css/*.css", "js/*.js"], {
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
});

 

2 odpowiedzi

0 głosów
odpowiedź 15 marca 2017 przez radek024 Maniak (66,160 p.)
Nie masz zmiennej odwołującej się do browser-sync, ale za to do gulpa i sassa masz dwa razy(1,2 oraz 13,14) :)
0 głosów
odpowiedź 15 marca 2017 przez Bakr Mądrala (6,740 p.)

Jak dodać wyjątek, aby z konkatenacji podlegały wszystkie pliki .js (tak jak teraz), ale oprócz tych, które mają nazwę *-home.js *-subpage.js ?

 

gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');
var htmlReaplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');

var config = {
  dist: 'dist/',
  src: 'src/',
  cssin: 'src/css/**/*.css',
  jsin: 'src/js/**/*.js',
  imgin: 'src/images/**/*.{jpg,jpeg,png,gif,svg}',
  htmlin: 'src/*.html',
  scssin: 'src/scss/**/*.scss',
  cssout: 'dist/css/',
  jsout: 'dist/js/',
  imgout: 'dist/images/',
  htmlout: 'dist/',
  scssout: 'src/css/',
  cssoutname: 'style.css',
  jsoutname: 'script.js',
  cssreplaceout: 'css/style.css',
  jsreplaceout: 'js/script.js'
};

gulp.task('reload', function() {
  browserSync.reload();
});

gulp.task('serve', ['sass'], function() {
  browserSync({
    server: config.src
  });

  gulp.watch([config.htmlin, config.jsin], ['reload']);
  gulp.watch(config.scssin, ['sass']);
});

gulp.task('sass', function() {
  return gulp.src(config.scssin)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last all versions']
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(config.scssout))
    .pipe(browserSync.stream());
});

gulp.task('css', function() {
  return gulp.src(config.cssin)
    .pipe(concat(config.cssoutname))
    .pipe(cleanCSS())
    .pipe(gulp.dest(config.cssout));
});

gulp.task('js', function() {
  return gulp.src(config.jsin)
    .pipe(concat(config.jsoutname))
    .pipe(uglify())
    .pipe(gulp.dest(config.jsout));
});

gulp.task('img', function() {
  return gulp.src(config.imgin)
    .pipe(changed(config.imgout))
    .pipe(imagemin())
    .pipe(gulp.dest(config.imgout));
});

gulp.task('html', function() {
  return gulp.src(config.htmlin)
    .pipe(htmlReaplace({
      'css': config.cssreplaceout,
      'js': config.jsreplaceout
    }))
    .pipe(htmlMin({
      sortAttributes: true,
      sortClassName: true,
      collapseWhitespace: true
    }))
    .pipe(gulp.dest(config.dist))
});

gulp.task('clean', function() {
  return del([config.dist]);
});

gulp.task('build', function() {
  sequence('clean', ['html', 'js', 'css', 'img']);
});

gulp.task('default', ['serve']);

 

Podobne pytania

0 głosów
0 odpowiedzi 43 wizyt
pytanie zadane 19 marca 2017 w Systemy operacyjne, programy przez Bakr Mądrala (6,740 p.)
0 głosów
1 odpowiedź 83 wizyt
pytanie zadane 20 lutego 2017 w JavaScript, jQuery, AJAX przez amiluke Obywatel (1,120 p.)
0 głosów
1 odpowiedź 34 wizyt
pytanie zadane 22 sierpnia w JavaScript, jQuery, AJAX przez MCT3000 Nowicjusz (220 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

66,400 zapytań

113,161 odpowiedzi

239,543 komentarzy

46,665 pasjonatów

Przeglądających: 170
Pasjonatów: 2 Gości: 168

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...