Так же в голову пришла идея, в отдельных файлах писать правила для медиа запросов, выглядит так
gulp.watch(src.less, ['less1', 'media']);
gulp.watch(src.media, ['media']);const gulp = require('gulp');
const gulpHtml = require('gulp-html');
const webpackStream = require('webpack-stream');
const gulpAutoprefix = require('gulp-autoprefixer');
const gulpSass = require('gulp-sass');
const gulpWatch = require('gulp-watch');
const gulpSourceMap = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const gulpStylelint = require('gulp-stylelint');
const gulpImage = require('gulp-image');
const historyFallback = require('connect-history-api-fallback');
const webpackConfig = require('./webpack.config.js');
export const stylesheets = () => {
return gulp.src('./src/scss/**/*.scss')
.pipe(gulpStylelint({
failAfterError: false,
reporters : [
{
formatter: 'string',
console : true,
fix : true,
},
],
}))
.pipe(gulpSourceMap.init())
.pipe(gulpSass({
outputStyle: 'compressed',
})).on('error', gulpSass.logError)
.pipe(gulpAutoprefix({
browsers: ['last 2 versions'],
}))
.pipe(gulpSourceMap.write())
.pipe(gulp.dest('./dev/css/'))
.pipe(browserSync.stream());
};
export const stylesheetsProduction = () => {
return gulp.src('./src/scss/**/*.scss')
.pipe(gulpStylelint({
failAfterError: true,
reporters : [
{
formatter: 'string',
console : true,
fix : true,
},
],
}))
.pipe(gulpSass({
outputStyle: 'compressed',
})).on('error', gulpSass.logError)
.pipe(gulpAutoprefix({
browsers: ['last 2 versions'],
}))
.pipe(gulp.dest('./build/css/'));
};
export const js = () => {
return gulp.src('./src/js/main.js')
.pipe(webpackStream(webpackConfig))
.pipe(gulp.dest('./dev/js'))
.pipe(browserSync.stream());
};
export const jsProduction = () => {
webpackConfig.watch = false;
gulp.src('./src/js/main.js')
.pipe(webpackStream(webpackConfig))
.pipe(gulp.dest('./build/js'));
};
export const image = () => {
return gulp.src('./src/images/*')
.pipe(gulpImage())
.pipe(gulp.dest('./dev/images'))
.pipe(browserSync.stream());
};
export const imageProduction = () => {
return gulp.src('./src/images/*')
.pipe(gulpImage())
.pipe(gulp.dest('./build/images'));
};
export const html = () => {
return gulp.src('./src/template/**/*.html')
.pipe(gulpHtml())
.pipe(gulp.dest('./dev'))
.pipe(browserSync.stream());
};
export const htmlProduction = () => {
return gulp.src('./src/template/**/*.html')
.pipe(gulpHtml())
.pipe(gulp.dest('./build'));
};
const watch = () => {
gulpWatch(['./src/scss/**/*.scss'], () => {
gulp.start('stylesheets');
});
gulpWatch(['./src/images/**/*'], () => {
gulp.start('image');
});
gulpWatch(['./src/template/**/*.html'], () => {
gulp.start('html');
});
};
const server = () => {
return gulp.series(function () {
browser.init({
server: {
baseDir : './dev',
middleware: [
historyFallback(),
],
},
open : true,
port : 8080,
});
});
};
// ХЗ что это такое....
// gulp.task('server', gulp.series('build', function () {
// browser.init({
// server: {
// baseDir : './dev',
// middleware: [
// historyFallback(),
// ],
// },
// open : true,
// port : 8080,
// });
// }));
export const development = gulp.series(
gulp.parallel(
stylesheets,
js,
image,
html,
),
gulp.parallel(
watch,
server,
),
);
export const production = gulp.parallel(
stylesheetsProduction,
jsProduction,
imageProduction,
htmlProduction,
);gulp.watch("#src/sass/**/*.sass").on('change', browsersync.reload);
node-sass: 3.8.0 (возможно потребуется также удалить и весь файл package-lock.json)npm install -D node-sass
gulp.task('default', ['serve']);gulp.task('default', function(done){
gulp.series(
'serve'
)(done)
});gulp.watch('./src/css/*.css', gulp.series('reload-css'));И вообще их как то можно в одной консоли объединить?
[01:03:15] The following tasks did not complete: less
[01:03:15] Did you forget to signal async completion?
return gulp.src("less/style.less")
const through = require('through2');
const PLUGIN_NAME = 'my plugin ';
const myPlugin = function (options) {
return through.obj(function (file, enc, cb) {
if (file.isNull()) {
cb(null, file);
return;
}
if (file.isStream()) {
cb(new Error(PLUGIN_NAME + 'Streaming not supported'));
return;
}
try {
let content = file.contents.toString();
content = '';// ... что-то делаем
file.contents = Buffer.from(content);
} catch (err) {
this.emit('error', new Error(PLUGIN_NAME + err.message));
}
this.push(file);
cb();
});
};function build() {
return gulp.src('./src/css/*.css')
.pipe(myPlugin)
//...
}if (/\.css$/.exec(file.path) !== null) {
//...
}gulp.task('demo', function(cb){
console.log(process.argv.splice(3));
cb();
});D:\dev\demo>gulp demo --file2
[02:22:08] Using gulpfile D:\dev\demo\gulpfile.js
[02:22:08] Starting 'demo'...
[ '--file2' ]
[02:22:08] Finished 'demo' after 13 ms<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M248.4,0c4.9,0,9.8,0,14.8,0c0.9,0.1,1.8,0.4,2.7,0.4c15.5,0.4,30.7,2.5,45.8,5.8c29.2,6.5,56.5,17.8,81.8,33.9
c0.5,0.3,1.1,0.6,1.7,0.9c4.7-4.7,9.4-9.4,14-14c12.3-12.3,31.2-12.4,43.5-0.2c11,10.8,21.9,21.7,32.7,32.7
c7.9,8,10.4,17.6,8.1,28.5c-1.2,5.7-4,10.6-8.1,14.6c-3,3-7.4,3.7-11.2,1.9c-3.7-1.7-5.9-5.4-5.7-9.5c0.2-2.7,1.4-4.8,3.1-6.8
c3.9-4.4,3.9-10.5-0.2-14.7c-10.9-11-21.9-22-32.9-32.9c-4.4-4.4-10.7-4.2-15.2,0.2c-3.6,3.5-7.1,7.1-10.6,10.6
c-0.4,0.4-0.6,0.9-0.9,1.2c52,41.3,85.1,94,96.3,159.5c11.2,65.4-1.5,126.4-36.9,182.7c0.5,0.5,0.9,1,1.3,1.5
c4.2,4.2,8.3,8.4,12.5,12.6c12.4,12.4,12.4,31.3,0.1,43.6c-10.8,10.8-21.5,21.6-32.4,32.3c-7.9,7.8-17.4,10.6-28.2,8.5
c-5.9-1.1-10.9-3.9-15.1-8.2c-5.4-5.6-2.9-14.7,4.6-16.6c3.6-0.9,6.7,0.1,9.5,2.6c4.8,4.3,10.7,4.1,15.2-0.3
c10.8-10.8,21.6-21.6,32.3-32.4c0.9-0.9,1.6-1.9,2.2-2.9c2.1-4.1,1.5-8.8-1.9-12.3c-3.6-3.8-7.4-7.4-11.1-11.2
c-0.2-0.2-0.5-0.4-0.8-0.6c-41.2,52-94,85.1-159.6,96.4c-65.5,11.3-126.6-1.6-182.9-37c-0.6,0.5-1.1,1-1.7,1.5
c-4.1,4.1-8.1,8.1-12.2,12.2c-12.7,12.5-31.4,12.5-44-0.1c-10.6-10.6-21.2-21.2-31.8-31.8c-7.3-7.3-10.4-16.1-9.1-26.4
c0.9-6.7,3.8-12.5,8.7-17.3c2.8-2.8,6.2-3.5,10-2.3c3.6,1.2,5.9,3.8,6.6,7.6c0.7,3.4-0.3,6.3-2.7,8.8c-2.1,2.3-3.2,4.9-3.1,8
c0.1,3.2,1.6,5.6,3.7,7.8c10.5,10.5,21,21,31.5,31.5c0.3,0.3,0.7,0.7,1.1,1c4.3,3.7,10.2,3.8,14.3-0.1c4.1-3.8,7.9-7.9,11.8-11.8
c0.1-0.1,0.1-0.3,0.1-0.4c-51.9-41.3-85-94.1-96.3-159.6c-11.2-65.5,1.8-126.4,37-182.7c-0.6-0.6-1.1-1.2-1.7-1.8
c-4.1-4.1-8.1-8.1-12.2-12.2c-12.4-12.5-12.4-31.4,0-43.8C37.7,48.5,48.4,37.9,59,27.3c5.2-5.3,11.4-8.5,18.8-9.3
c9.8-1,18.3,2,25.2,9.1c2.1,2.2,2.9,4.9,2.5,7.9c-0.5,3.8-2.6,6.5-6.2,7.9c-3.7,1.4-7.1,0.8-10.1-1.7c-0.2-0.2-0.4-0.3-0.6-0.5
c-4.9-4.3-10.7-4.2-15.4,0.4C62.6,51.7,52.1,62.4,41.3,72.8c-4.5,4.4-5,11.7,0,16.4c3.4,3.2,6.6,6.6,9.9,9.9c0.4,0.4,1,0.8,1.4,1.2
c0.2-0.2,0.4-0.3,0.5-0.4c0.6-0.8,1.2-1.5,1.8-2.3c29.5-37.1,66.4-64.2,110.7-81.1c25.9-9.9,52.8-15.3,80.6-16.1
C247,0.4,247.7,0.1,248.4,0z M113.5,256.1c-0.1,78.3,63.5,141.9,141.3,142.5c79.1,0.7,143.9-63.5,143.8-142.5
c0-78.8-64.1-142.9-142.7-142.7C177,113.7,113.5,177.3,113.5,256.1z M309.9,486c42.8-10.3,79.9-30.6,111.2-61.2
c32.7-32,54.2-70.3,65-115.2c-1.3,0-2.2,0-3,0c-18.1,0-36.2,0-54.4,0c-1,0-2,0-2.9-0.1c-4.7-0.4-8.3-4-8.9-8.8
c-0.5-4.4,2.3-9,6.6-10.4c1.5-0.5,3.1-0.6,4.6-0.6c19.5,0,39,0,58.6,0c1,0,1.9,0,3.1,0c3.2-22.7,3.2-45.2,0-67.6
c-5.6-0.6-72.7-0.3-74.6,0.3c7.6,39.8,2.4,77.7-17.6,113.1c-20,35.4-49.6,59.7-87.7,73.7C309.9,434.8,309.9,460.2,309.9,486z
M289.7,415c-39.9,7.6-77.8,2.5-113.2-17.5c-35.5-20-59.8-49.6-74-87.9c-0.8,0-1.7,0-2.5,0c-24.5,0.1-49,0.1-73.5,0.2
c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.1,0.1-0.2,0.4c7.6,32.1,21.4,61.5,41.4,87.9c23.2,30.7,52.3,54.3,87,71
c15.2,7.3,31,12.9,47.8,16.7c0-1.4,0-2.3,0-3.3c0-18.1,0-36.2,0-54.4c0-0.7,0-1.5,0-2.2c0.4-5.1,4.4-9.1,9.4-9.3
c5.2-0.2,9.5,3.4,10.2,8.6c0.2,1.2,0.2,2.5,0.2,3.7c0,19.2,0,38.4,0,57.5c0,1,0,1.9,0,3.1c22.7,3.2,45.1,3.2,67.5,0
C289.7,464.7,289.7,439.9,289.7,415z M202.2,26.3c-86.5,19-157.3,90.8-175.9,176c1,0,2,0,3,0c18.1,0,36.2,0,54.4,0
c0.8,0,1.6,0,2.5,0c5,0.4,8.7,4.1,9.3,8.9c0.5,4.5-2.3,8.9-6.7,10.3c-1.4,0.4-2.9,0.5-4.4,0.5c-19.7,0-39.4,0-59,0
c-0.9,0-1.9,0.1-2.8,0.1c-3.3,16.1-3.2,58.8,0.2,67.5c24.7,0,49.5,0,74.4,0c-7.7-39.9-2.5-77.8,17.5-113.2
c20-35.5,49.6-59.8,87.7-73.8C202.2,77.1,202.2,51.7,202.2,26.3z M222.3,97c39.9-7.7,77.8-2.5,113.2,17.5
c35.4,20,59.7,49.5,73.8,87.5c3.5,0.5,74.7,0.3,76.4-0.2c-19.2-86.5-90.9-157-176-175.6c0,1,0,2,0,2.9c0,18.1,0,36.2,0,54.4
c0,1,0,2-0.1,2.9c-0.5,4.9-4.4,8.6-9.4,8.8c-4.7,0.2-9-3-10-7.7c-0.3-1.3-0.3-2.6-0.3-3.9c0-19.5,0-39,0-58.5
c0-0.9-0.1-1.9-0.1-2.8c-19.4-3.2-58-3-67.4,0.2C222.3,47.3,222.3,72.1,222.3,97z"/>
</svg>opechatka
.soc {
}opechatka .soc {
}{
opechatka
display: flex;
}{
opechatka: 10px;
display: flex;
}