Когда в своем проекте я пробую подключить любые css стили с помощью link, кроме моего скомпилированного с scss main.css, сервер их игнорирует, а если импортировать эти стили в главный main.scss изменяя при этом например animation.css на _animation.scss, то все работает отлично. В чем проблема?
Вот мой 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);
});
Простой
