Gulp - Cannot find module 'gulp-rename'

Question

I trying to set up Gulp to compile a SCSS file and also rename the SCSS file in the process - so for example:

I want SCSS/original.scss to be saved as CSS/new.css

This is on a Windows 10 VM

I have installed Gulp, installed gulp-sass which all worked just fine

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('compile-new-main', function(){
 return gulp.src('scss/new-main.scss')
  .pipe(sass()) // Using gulp-sass
  .pipe(gulp.dest('css'))
 });

Running the above gulp task works just fine but when I try and install gulp-rename as the following the task breaks:

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require("gulp-rename");

gulp.task('compile-new-main', function(){
 return gulp.src('scss/new-main.scss')
  .pipe(sass()) // Using gulp-sass
  .pipe(rename("styles.css"))
  .pipe(gulp.dest('css'))
 });

I initially tried just installing gulp rename with this command

npm install gulp-rename

The same as I did for gulp-sass which seemed to work just fine as before, clearly not but I'm not sure how or why.

I've done some Googling and tried installing it globally which again seemed to install fine

npm install gulp-rename -g

And I also saw some recommendations of saving gulp-rename as a dev-dependancy so I tried

npm install gulp-rename --save-dev

Again no errors in installing.

When I try and run my gulp task this is the error message I get:

Error: Cannot find module 'gulp-rename' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (C:\Projects\VAT-Expert\gulpfile.js:3:14) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3)

I can't get my head around what I've done wrong here, think I've added all of the relevant information here - very much appreciate any guidance or advice on what I could try on this one!

N

Solution 1

First, make sure that gulp-rename is listed in your package.json under dependencies or devDependencies. Then run:

npm uninstall -g gulp
npm install -g gulp
rm -rf node_modules
npm install 

Then check again.

Solution 2

install the gulp-rename package from cli:

npm install --save-dev gulp-rename

then import the package from node_modules

const rename = require("gulp-rename");

use it before compiling

Example:

const miniCSS = () => {
    return gulp.src('./css/*.css')
    .pipe(rename('style.min.css'))
    .pipe(uglifycss({
        "uglyComments": true
    }))
    .pipe(gulp.dest('./dist/'))
}