V
V
Vasily2016-09-27 12:19:01
npm
Vasily, 2016-09-27 12:19:01

My browser-sync server does not see css files. What to do?

When in my project I try to connect any css styles using a link, except for my main.css compiled with scss, the server ignores them, and if I import these styles into the main main.scss while changing, for example, animation.css to _animation.scss, then everything works perfectly. What is the problem?
Here is my gulpfile:

//gulpfile.js
// Import all plugins and gulp
var gulp = require('gulp'),
  watch = require('gulp-watch'),
  plumber = require('gulp-plumber'),
  prefixer = require('gulp-autoprefixer'),
  uglify = require('gulp-uglify'),
  sass = require('gulp-sass'),
  cssclean = require('gulp-clean-css'),
  sourcemaps = require('gulp-sourcemaps'),
  rigger = require('gulp-rigger'),
  imagemin = require('gulp-imagemin'),
  pngquant = require('imagemin-pngquant'),
  rimraf = require('rimraf'),
  browserSync = require("browser-sync"),
  reload = browserSync.reload;
bootlint = require('gulp-bootlint');
realFavicon = require('gulp-real-favicon');
fs = require('fs');

// Create object with all pathes
var path = {
  build: { // Whtere to put all compiled files
    html: 'build/',
    js: 'build/js/',
    css: 'build/css/',
    img: 'build/img/',
    fonts: 'build/fonts/'
  },
  src: { // Where to get source from
    html: 'src/*.html',
    js: 'src/js/main.js',
    style: 'src/style/main.scss',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*'
  },
  watch: { // Watching files
    html: 'src/**/*.html',
    js: 'src/js/**/*.js',
    style: 'src/style/**/*.scss',
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/**/*.*'
  },
  clean: './build'
};

// Set up dev server
var config = {
  server: {
    baseDir: "./build"
  },
  tunnel: true,
  host: 'localhost',
  port: 9000,
  logPrefix: "WELES777",
};

// Running webserver (livereload)
gulp.task('webserver', function() {
  browserSync(config);
});

// Puting all HTML files together
gulp.task('html:build', function() {
  gulp.src(path.src.html)
    .pipe(rigger())
    .pipe(gulp.dest(path.build.html))
    .pipe(reload({stream: true}));
});

// Puting all JS files together
gulp.task('js:build', function() {
  gulp.src(path.src.js)
    .pipe(rigger())
    .pipe(sourcemaps.init())
    // .pipe(uglify()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.js))
    .pipe(reload({ stream: true }));
});

// Puting all  SCSS files together
gulp.task('style:build', function() {
  gulp.src(path.src.style)
    .pipe(sass().on('error', function(err) {
      console.error(err.message);
      browserSync.notify(err.message, 3000); 
      this.emit('end'); 
    }))
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sass())
    .pipe(prefixer({
      browsers: ["Android 2.3",
        "Android >= 4",
        "Chrome >= 20",
        "Firefox >= 24",
        "Explorer >= 10",
        "iOS >= 6",
        "Opera >= 12",
        "Safari >= 6"
      ]
    }))
    // .pipe(cssclean())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.css))
    .pipe(reload({ stream: true }));
});

// Puting all  images files together and compressing
gulp.task('image:build', function() {
  gulp.src(path.src.img)
    // .pipe(imagemin({ 
    //     progressive: true,
    //     svgoPlugins: [{removeViewBox: false}],
    //     use: [pngquant()],
    //     interlaced: true
    // }))
    .pipe(gulp.dest(path.build.img))
    .pipe(reload({ stream: true }));
});


// Moving fonts
gulp.task('fonts:build', function() {
  gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.build.fonts))
});

// Run all plugins
gulp.task('build', [
  'html:build',
  'js:build',
  'style:build',
  'fonts:build',
  'image:build'
]);



// Autocompilatin of plugins on change
gulp.task('watch', function() {
  watch([path.watch.html], function(event, cb) {
    gulp.start('html:build');
  });
  watch([path.watch.style], function(event, cb) {
    gulp.start('style:build');
  });
  watch([path.watch.js], function(event, cb) {
    gulp.start('js:build');
  });
  watch([path.watch.img], function(event, cb) {
    gulp.start('image:build');
  });
  watch([path.watch.fonts], function(event, cb) {
    gulp.start('fonts:build');
  });
});


// Cleaning build folder
gulp.task('clean', function(cb) {
  rimraf(path.clean, cb);
});

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
bingumd, 2016-09-27
Demyanuk @WELES333

There is nothing related to css files in your gulpfile.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question