Gulp不转换scss到css

Question

在Visual Studio中，Gulp没有运行将我的scss文件转换为css。

我得到的错误是：

cmd.exe /c gulp --tasks-simple C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\lib\binding.js:15 throw new Error(errors.missingBinary()); ^Error: Missing binding C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-47\binding.node Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 5.x Found bindings for the following environments: - Windows 64-bit with Node.js 7.x This usually happens because your environment has changed since running npm install . Run npm rebuild node-sass to build the binding for your current environment.

我没有在我的项目文件夹的根目录运行npm rebuild node-sass，但仍然得到同样的错误。这是我跑npm rebuild node-sass后得到：

Binary found at C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-51\binding.node Testing binary Binary is fine node-sass@3.13.1 C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass

我Gulpfile.js看起来是这样的：

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

gulp.task('default', function() { 
    // place code for your default task here 
}); 

gulp.task("sass", function() { 
    return gulp.src('wwwroot/scss/style.scss') 
     .pipe(sass()) 
     .pipe(gulp.dest('wwwroot/css')); 
}); 

任何想法如何，我可以解决这个问题？

更新： 如果我在命令行运行node -v，我得到v7.10.0。

此外，我发现这篇文章，并按照指示，但问题仍然没有解决，我现在也看到与我的项目鲍尔问题。 这里的文章： https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

而这里的什么我看到在我的项目：

如果我点击“管理鲍尔包”在Visual Studio中，它只是尝试和尝试，但似乎无法找到已安装的软件包。

更新2：

这里的`的package.json'：

{ 
    "name": "ingrid", 
    "version": "1.0.0", 
    "description": "Ingrid frontend", 
    "scripts": { 
    "start": "webpack-dev-server --port 43131", 
    "build": "webpack", 
    "build-production": "webpack --process -p" 
    }, 
    "dependencies": { 
    "chart.js": "^2.1.6", 
    "filepicker-js": "^2.4.14", 
    "fine-uploader": "^5.14.2", 
    "fine-uploader-wrappers": "1.0.0", 
    "immutable": "^3.7.6", 
    "imports-loader": "^0.6.5", 
    "moment": "^2.14.1", 
    "object-assign": "4.1.1", 
    "react": "^15.5.4", 
    "react-addons": "^0.9.0", 
    "react-addons-css-transition-group": "^15.5.2", 
    "react-chartjs": "^0.7.3", 
    "react-dom": "^15.5.4", 
    "react-flip-move": "^2.4.1", 
    "react-masonry-component": "^4.1.0", 
    "react-perfect-scrollbar": "^0.1.1", 
    "react-redux": "^4.4.0", 
    "react-tinymce": "^0.4.0", 
    "redux": "^3.3.1", 
    "redux-thunk": "^1.0.3", 
    "tinymce": "^4.4.0" 
    }, 
    "devDependencies": { 
    "babel-cli": "6.23.0", 
    "babel-core": "^6.24.1", 
    "babel-eslint": "7.2.0", 
    "babel-loader": "6.4.1", 
    "babel-plugin-rewire": "1.0.0", 
    "babel-polyfill": "^6.9.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "babel-preset-stage-2": "^6.22.0", 
    "babel-plugin-syntax-class-properties": "6.13.0", 
    "babel-plugin-transform-class-properties": "6.23.0", 
    "babel-plugin-transform-object-rest-spread": "6.23.0", 
    "css-loader": "0.27.3", 
    "es6-promise": "4.1.0", 
    "eslint": "3.18.0", 
    "eslint-plugin-react": "6.10.3", 
    "extract-text-webpack-plugin": "2.1.0", 
    "exports-loader": "^0.6.3", 
    "gulp": "3.8.11", 
    "gulp-concat": "2.5.2", 
    "gulp-cssmin": "0.1.7", 
    "gulp-sass": "^2.3.2", 
    "gulp-uglify": "1.2.0", 
    "pica": "2.0.8", 
    "react-hot-loader": "^1.3.0", 
    "rimraf": "2.2.8", 
    "style-loader": "^0.18.1", 
    "webpack": "^2.6.1", 
    "webpack-node-externals": "^1.6.0", 
    "webpack-dev-server": "^2.4.5", 
    "whatwg-fetch": "^1.0.0" 
    } 
} 

Answer 1

cnpm install gulp-load-plugins --save-dev 

，然后修改gulpfile

var gulp = require('gulp'), 
    sass = require("gulp-sass"), 
    gulpLoadPlugins = require('gulp-load-plugins'), 
    $ = gulpLoadPlugins(); 

gulp.task('default', function() { 
    // place code for your default task here 
}); 

gulp.task("sass", function() { 
    return gulp.src('wwwroot/scss/style.scss') 
     .pipe($.sass()) 
     .pipe(gulp.dest('wwwroot/css')); 
}); 

Answer 2

这里是例子一饮而尽任务与水管工，sourcemaps和sass选项。

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

gulp.task('css', function() { 
    return gulp.src(path.styles) 
     .pipe(plumber()) 
     .pipe(sourcemaps.init('.')) 
     .pipe(sass({outputStyle: 'compressed'}) 
      .on('error', sass.logError)) 
     .pipe(rename(function(path) { 
      path.extname = '.min.css'; 
     })) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./dist/assets/css')) 
});