I can’t wrap my head around this I tried a couple things online and nothing is working. I need to start finishing up this website it’s for a plumbing company.
Best, Jason
Best, Jason
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
Happy coding
Ok thanks I deleted node module folder package.json file and tried npm install didn’t work for me.
We can’t really see the error message. What module is it not finding? You can copy/paste the error instead as well.
I assume you have gulp installed as a dependency?
Without seeing all the code I doubt we can really help so you will likely have to post a repo.
If you just delete the package.json file npm install will not have anything to install. Your dependencies are in that file.
So sorry man I just signed up for this platform I’m still figuring it all out the second I get home after my Goo Goo doll concert. I will post more information so you can better help me sorry again.
PS C:\Users\pytho\Documents\Tri-Star plumbing project> gulp
node:internal/modules/cjs/loader:1080
throw err;
^
Error: Cannot find module ‘C:\Users\pytho\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js’
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: ‘MODULE_NOT_FOUND’,
requireStack:
}
Node.js v18.16.1
I changed the node to this version to see if that would work that’s one thing I did. I deleted the node_modules folder right click delete same for package-lock.json. then I did npm install to get it al back did not work. and I tried a bunch of random command stuff of the internet that like updates all your npm packages.
Gulpfile.js
// Gulpfile
“use strict”;
const gulp = require(‘gulp’);
const sass = require(‘gulp-sass’)(require(‘sass’));
const autoprefixer = require(‘gulp-autoprefixer’);
const rename = require(‘gulp-rename’);
const concat = require(‘gulp-concat’);
const cleanCSS = require(‘gulp-clean-css’);
const uglify = require(‘gulp-uglify-es’).default;
const browsersync = require(‘browser-sync’).create();
// Gulp plumber error handler - displays if any error occurs during the process on your command
function errorLog(error) {
console.error.bind(error);
this.emit(‘end’);
}
// SASS - Compile SASS files into CSS
function scss() {
return gulp
.src(‘./assets/scss/**/*.scss’)
.pipe(sass({ outputStyle: ‘expanded’ }))
.pipe(cleanCSS({compatibility: ‘ie11’}))
.pipe(rename({suffix: ‘.min’}))
.pipe(gulp.dest(‘./assets/css/’))
.on(‘error’, sass.logError)
.pipe(autoprefixer([
“last 1 major version”,
“>= 1%”,
“Chrome >= 45”,
“Firefox >= 38”,
“Edge >= 12”,
“Explorer >= 10”,
“iOS >= 9”,
“Safari >= 9”,
“Android >= 4.4”,
“Opera >= 30”], { cascade: true }))
.pipe(gulp.dest(‘./assets/css/’))
.pipe(browsersync.stream());
}
// BrowserSync (live reload) - keeps multiple browsers & devices in sync when building websites
function browserSync(done) {
browsersync.init({
files: “./*.html”,
startPath: “./Home.html”,
server: {
baseDir: “./”,
routes: {},
middleware: function (req, res, next) {
if (/.json|.txt|.html/.test(req.url) && req.method.toUpperCase() == ‘POST’) {
console.log('[POST => GET] : ’ + req.url);
req.method = ‘GET’;
}
next();
}
}
});
done();
}
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Gulp Watch and Tasks
function watch() {
gulp.watch(‘./assets/scss//*.scss’, scss);
gulp.watch(
[
'./html//*.html’
],
gulp.series(browserSyncReload)
);
}
// JavaSript minifier - merges and minifies the below given list of Space libraries into one theme.min.js
function minJS() {
return gulp
.src([
‘./assets/js/fabrx-scripts.js’,
])
.pipe(concat(‘fabrx-scripts.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘./dist/assets/js/’));
}
// Copy Vendors - a utility to copy client-side dependencies into a folder
function copyVendors() {
return gulp
.src([
‘./node_modules/bootstrap/**/’,
‘./node_modules/swiper/**/’,
‘./node_modules/lodash/**/’,
‘./node_modules/simplebar/**/’,
‘./node_modules/dropzone/**/’,
‘./node_modules/flatpickr/**/’,
‘./node_modules/sticky-js/**/’,
‘./node_modules/smooth-scroll/**/’,
‘./node_modules/bootstrap-slider/**/’,
‘./node_modules/isotope-layout/**/’,
‘./node_modules/isotope-packery/**/’,
‘./node_modules/masonry-layout/**/’,
‘./node_modules/purecounterjs/**/’,
])
.pipe(gulp.dest(‘./assets/vendor/’))
};
// Gulp Tasks
gulp.task(‘default’, gulp.parallel(watch, scss, browserSync));
gulp.task(‘minJS’, minJS);
gulp.task(‘copyVendors’, copyVendors);
gulp.task(‘dist’, gulp.series(copyVendors, minJS));
I notice on another project same set up pretty much does the same error when I type in gulp
Also I just noticed the node_module folder is greyed out for some reason.
npm install gulp -g
followed by npm install gulp-cli -g --force
this worked for me saw it in a stack overflow anyone know why It did would like to know for the future also so I can learn thank you.
I haven’t really used gulp in a long time but with it installed as a project dependency, you would usually have npm scripts that run it. If you run it directly from the terminal the CLI may have to be installed globally.
If all you need gulp for is to compile SCSS I would suggest using something else. Like a Vite project. Or a simpler bundler like Parcel, or you can go the Webpack route.
Is there a bootstrap UI kit that uses one of those. I already bought this UI kit and am working on this project with it and another one so I’m gonna have to stick with it for now.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.