Topic: Gulpfile.js not quite right
Dre Crego free asked 5 years ago
Using the downloaded gulpfile.js as is, with no modifications, and the material design download as is, when I initiate the server with 'gulp mdb-go' I get a page with a listing directory of the files on my hard drive instead of the rendered html as expected. This is by far, the closest to success I have come, and I might have to settle for it. I can click on 'index.html' and get to the rendered page, but there is no live updating like you would expect.
I have been at this for a week, all day, every day, searching Stack Overflow, reddit, reading the github pages for gulp and browsersync, trying to figure out how to write this stupid configuration file correctly. I am at my wit's end.
The worst part is, I actually had it working at one point yesterday, but I wanted to be able to add or remove npm modules if needed, so I started messing around with it, and now I cannot get it back to the way it was. I have deleted everything - my project folder, everything - and re-downloaded everything, started over at step 1, and yet, it still does not work the way it should.
Why are there no clear instructions anywhere on the internet for Gulp? Every tutorial I have found works clear up until you get to the "watch" service which never, ever works. Even CSS-tricks let me down.
I even tried reverting to Gulp version 3.9.1 as suggested to someone here. Nope.
cfo64nc pro answered 4 years ago
I'm able to use mdb-go (MDB Pro version 4.11.0) on macOS Mojave 10.14.6. I won't upgrade Catalina because of incompatibilities with some of my applications. I'm using JetBrains' WebStorm 2019.3.3 with node v8.11.3 installed via Homebrew. gulp (CLI version: 2.2.0 Local version: 4.0.1)
/usr/local/bin/node /Users/*/node_modules/gulp/bin/gulp.js --color --gulpfile /Users/*/Downloads/MDB-Gulp-Pro_4.11.0/gulpfile.js mdb-go [14:49:45] Using gulpfile ~/Downloads/MDB-Gulp-Pro_4.11.0/gulpfile.js [14:49:45] Starting 'mdb-go'... [14:49:45] Finished 'mdb-go' after 58 ms [Browsersync] Access URLs:
Local: http://localhost:3000
External: http://192.168.1.2:3000
UI: http://localhost:3001
UI External: http://localhost:3001
[Browsersync] Serving files from: ./dist
infin80 free answered 5 years ago
Same issue! Works only ONCE. Fought with this for two FULL days and need help desperately. Does the problem stem from using 'series' instead of 'start'?
https://github.com/infin80/MDB-FREE-GULP
Is anyone able to make the MDB-GO work? On a Mac? And how about putting a date on the page(s) so we know the code is up-to-date?? Thx in advance, _DG
Dre Crego free answered 5 years ago
Also, this might help.
My file structure is like this:
Top-level directories:
css
dist
font
img
js
node_modules
scss
Top-level files of importance:
gulpfile.js
index.html
package.json &package-lock.json
You know what would really help? If the Gulp tutorial would show you what the file structure is supposed to look like when you are finished installing, and make sure it doesn't conflict with the other tutorials.
Piotr Glejzer staff commented 5 years ago
Hi. Which version of gulp do you use? Do you have some console errors or something? Do you have correct paths? CSS folder should be in the 'dist' folder. Dist folder is the main folder where you have all compiled and minified files. I checked and If you going exactly the same way through our tutorial about gulp everything is working correctly.
Dre Crego free answered 5 years ago
Sure, but it's exactly the same as the one provided here:https://mdbootstrap.com/education/bootstrap/gulp-installation/
But here ya go (and yes, I have all the dependencies installed):
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const imagemin = require('gulp-imagemin');
const fs = require('fs');
const cssAddonsPath = './css/modules/';
// CSS Tasks
gulp.task('css-compile', function() {
gulp.src('scss/*.scss')
.pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(gulp.dest('./dist/css/'));
gulp.start('css-compile-modules');
});
// CSS Tasks
gulp.task('css-compile-modules', function() {
gulp.src('scss/**/modules/**/*.scss')
.pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(rename({ dirname: cssAddonsPath }))
.pipe(gulp.dest('./dist/'));
});
gulp.task('css-minify', function() {
gulp.src(['./dist/css/*.css', '!./dist/css/*.min.css', '!./dist/css/bootstrap.css'])
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css'));
gulp.start('css-minify-modules');
});
gulp.task('css-minify-modules', function() {
gulp.src(['./dist/css/modules/*.css', '!./dist/css/modules/*.min.css'])
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css/modules'));
});
// JavaScript Tasks
gulp.task('js-build', function() {
const plugins = getJSModules();
return gulp.src(plugins.modules)
.pipe(concat('mdb.js'))
.pipe(gulp.dest('./dist/js/'));
gulp.start('js-lite-build');
gulp.start('js-minify');
});
gulp.task('js-minify', function() {
gulp.src(['./dist/js/mdb.js'])
.pipe(minify({
ext:{
// src:'.js',
min:'.min.js'
},
noSource: true,
}))
.pipe(gulp.dest('./dist/js'));
});
// Image Compression
gulp.task('img-compression', function() {
gulp.src('./img/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('./dist/img'));
});
// Live Server
gulp.task('live-server', function() {
browserSync.init({
server: {
baseDir: "./dist",
directory: true
},
notify: false
});
gulp.watch("**/*", {cwd: './dist/'}, browserSync.reload);
});
// Watch on everything
gulp.task('mdb-go', function() {
gulp.start('live-server');
gulp.watch("scss/**/*.scss", ['css-compile']);
gulp.watch(["dist/css/*.css", "!dist/css/*.min.css"], ['css-minify']);
gulp.watch("js/**/*.js", ['js-build']);
gulp.watch(["dist/js/*.js", "!dist/js/*.min.js"], ['js-minify']);
gulp.watch("**/*", {cwd: './img/'}, ['img-compression']);
});
function getJSModules() {
delete require.cache[require.resolve('./js/modules.js')];
return require('./js/modules');
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: Other
- MDB Version: -
- Device: pc
- Browser: chrome
- OS: node.js
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff commented 5 years ago
Thank you for such a rich message! Could you please show us your gulpfile?