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