Здравствуйте! Прошу откликнуться и помочь в решении данного вопроса... Имеется gulpfile: PHP: var gulp = require('gulp');var autoprefixer = require('gulp-autoprefixer');var cleanCSS = require('gulp-clean-css');var gcmq = require('gulp-group-css-media-queries');var less = require('gulp-less');var browserSync = require('browser-sync').create();var rename = require('gulp-rename');var config = { src: './src/', css: { watch: 'less/**/*.less', src: 'less/styles.less', dest: 'css' }, php: { src: '**/*.php' }, html: { src: '*.html' }};gulp.task('pack', function(){ gulp.src(config.src + config.css.dest + '/**/*.css') .pipe(autoprefixer({ browsers: ['> 0.01%'], cascade: false })) .pipe(cleanCSS()) .pipe(rename({suffix: '.min', prefix : ''})) .pipe(gulp.dest(config.src + config.css.dest)); });gulp.task('build', function(){ gulp.src(config.src + config.css.src) .pipe(less()) .pipe(gcmq()) .pipe(gulp.dest(config.src + config.css.dest)) .pipe(browserSync.reload({ stream: true }));});gulp.task('php', function(){ gulp.src(config.src + config.php.src) .pipe(browserSync.reload({ stream: true }));});gulp.task('watch', ['browserSync'], function(){ gulp.watch(config.src + config.css.watch, ['build']); gulp.watch(config.src + config.php.src, ['php']); gulp.watch(config.src + config.html.src, browserSync.reload);});gulp.task('browserSync', function(){ browserSync.init({ proxy: "" });}); Думаю, что в config надо пути правильно прописать и расширения нужные добавить, за файлами которых нужно будет следить . в gulp watch прописать новые пути и в browserSync что-то подправить. Скажите, я правильно пишу? И куда положить в opencart папку src?
Наверно как то так Код: gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() { gulp.watch('app/**/*.scss', ['sass']); gulp.watch('app/js/**/*.js', browserSync.reload); gulp.watch('../catalog/view/theme/**/*.tpl', browserSync.reload); gulp.watch('../catalog/**/*.php', browserSync.reload); }); А вообще посмотрите еще на плагин https://libraries.io/npm/gulp-opencart-refresh И на проект https://github.com/Skraylet/gulp_opencart Код: // Подключаем Gulp и все необходимые библиотеки var gulp = require('gulp'), gutil = require('gulp-util' ), sass = require('gulp-sass'), browserSync = require('browser-sync'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'), ftp = require('vinyl-ftp'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), del = require('del'), cache = require('gulp-cache'), notify = require("gulp-notify"); // Обновление страниц сайта на локальном сервере gulp.task('browser-sync', function() { browserSync({ proxy: "opencart.loc", notify: false }); }); // Компиляция stylesheet.css gulp.task('sass', function() { return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass') .pipe(sass({outputStyle: 'expand'}).on("error", notify.onError())) .pipe(rename({suffix: '.min', prefix : ''})) .pipe(autoprefixer(['last 15 versions'])) .pipe(cleanCSS()) .pipe(gulp.dest('catalog/view/theme/apple/stylesheet/')) .pipe(browserSync.reload({stream: true})) }); // Наблюдение за файлами gulp.task('watch', ['sass', 'browser-sync'], function() { gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', ['sass']); gulp.watch('catalog/view/theme/apple/template/**/*.tpl', browserSync.reload); gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload); gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload); }); // Выгрузка изменений на хостинг gulp.task('deploy', function() { var conn = ftp.create({ host: 'hostname.com', user: 'username', password: 'userpassword', parallel: 10, log: gutil.log }); var globs = [ 'catalog/view/theme/apple/**' ]; return gulp.src(globs, {buffer: false}) .pipe(conn.dest('/path/to/folder/on/server')); }); gulp.task('default', ['watch']);
Влад,спасибо что откликнулись и потратили время на написание мне кода, но в моём файле есть config. Там в нём достаточно прописать путь. Это удобно, не нужно везде менять пути... Помогите с конфигом... в CMS пока не разобрался... Что касается gulpfile, который вы мне дали... Я тоже его нашёл в сети, но я хочу изменить свой gulpfile и работать с ним. Мой, намного удобнее и компактнее. Там есть всё, что мне нужно!
для этого настраивать openServer не нужно. Не понятно чему вас научил Дмитрий со своим smartgrid'ом, лучше бы основам вас научил.
browserSynh - это для ленивых) Я вам сказал сделайте отдельную верстку в отдельной папке, а потом смотрите на документацию OpenCart на русском языке и правьте нужные вам файлы, так делать начинают более опытные веб мастера, про спецов я вообще не говорю. У вас должна быть отдельная верстка HTML, CSS, JS и отдельный шаблон для движка OpenCart - это все потом можно будет продать и если что у вас будет готовый код, который можно внедрять не только на OpenCart. Сейчас попробую сам настроить OpenCart с Gulp под версии.
Пожалуйста, попробуйте сделать что-то с моим gulpfile. Он рабочий, только пути в config нужно исправить для opencart PHP: var config = { src: './src/', dest: './src/', php: { src: '**/*.php' }, css: { dest: 'css' }, less: { watch: 'precss/**/*.less', src: 'precss/styles.less' }};var gulp = require('gulp');var less = require('gulp-less');var gcmq = require('gulp-group-css-media-queries');var autoprefixer = require('gulp-autoprefixer');var clean = require('gulp-clean-css');var rename = require('gulp-rename');var browserSync = require('browser-sync').create();gulp.task('build', function(){ gulp.src(config.src + config.css.dest + '**/*.css') .pipe(autoprefixer({ browsers: ['> 0.001%'], cascade: false })) .pipe(clean()) .pipe(rename({suffix: '.min', prefix : ''})) .pipe(gulp.dest(config.src));});gulp.task('less', function(){ gulp.src(config.src + config.less.src) .pipe(less()) .pipe(gcmq()) /*.pipe(autoprefixer({ browsers: ['> 0.001%'], cascade: false })) .pipe(clean())*/ .pipe(gulp.dest(config.src + config.css.dest)) .pipe(browserSync.reload({ stream: true }));});gulp.task('php', function(){ gulp.src(config.src + config.php.src) .pipe(browserSync.reload({ stream: true }));});gulp.task('browserSynh', function(){ browserSync.init({ proxy: "rollerdrome" });});gulp.task('watch', ['browserSynh'], function(){ gulp.watch(config.src + config.less.watch, ['less']); gulp.watch(config.src + config.php.src, ['php']);}); Пути в gulpfile были настроены по этому шаблону:
@Алексей_87 вот собрал на быструю руку. сами подправите что до как, обычно у меня все по другому выглядит но вам для начала сойдет) proxy поменяйте на свою папку в domains/.. Пути меняете на свои. PHP: 'use strict';var gulp = require('gulp'), prefixer = require('gulp-autoprefixer'), less = require('gulp-less'), cssmin = require('gulp-clean-css'), browserSync = require("browser-sync");gulp.task('style:build', function () { gulp.src('catalog/view/theme/default/stylesheet/less/*.less') .pipe(less()) .pipe(prefixer()) .pipe(cssmin()) .pipe(gulp.dest('catalog/view/theme/default/stylesheet')) .pipe(browserSync.reload({ stream: true }));});gulp.task('browser-sync', function() { browserSync.init({ proxy: "opencart3", notify: false });});gulp.task('watch', function () { gulp.watch('**/*.php').on('change', browserSync.reload); gulp.watch('**/*.twig').on('change', browserSync.reload); gulp.watch('**/*.tpl').on('change', browserSync.reload); gulp.watch('catalog/view/theme/default/stylesheet/less/*.less', ['styles:build']);});// Команда gulp запускает сразу все разом.gulp.task('default', ['browser-sync', 'watch', 'style:build']);
Большое спасибо, что сделали для меня gulpfile!!! Я настроил всё так, как вы сказали и запустил команду gulp, но выходит пока то, что выходила в последний раз у меня: Мне кажется, что нужно как-то настроить папку доменов в openserver. У вас была похожая ситуация. И да, по поводу последнего вашего комментария. Я вас услышал, по поводу вёрстки. Сначала верстаю, потом переношу на opencart. Спасибо! Я так и сделаю!!!
OpenServer трогать вообще не нужно, то что вы хотели настроить домены, вообще трогать не надо. А судя то что я вижу, то он у вас открывает catalog/view/theme/default Я могу сказать что у вас явно кэш застрял и вам нужно нажать F12 и настроить отладчик/ инспектор так чтобы он очищал бы кэш, а проще зайдите через инкогнито.
