标签: gulp-sass

我更新到Node v4.0.0,之后当我在我的项目中运行gulp时,我得到一个关于gulp-sass/node-sass的错误,如下所示:

错误:libsass未找到绑定.尝试重新安装node-sass？

我试图删除项目中的所有节点模块并重新安装,我收到一些错误:

npm WARN package.json package@0.0.0没有存储库字段.

npm WARN package.json package@0.0.0没有许可证字段.

npm WARN弃用CSSselect@0.4.1:该模块现在可用作'css-select'

npm WARN弃用了CSSwhat@0.4.7:该模块现在可用作'css-what'

npm WARN弃用pangyp@2.3.2:使用node-gyp @ 3 +,它可以完成所有工作

-

node-sass@2.1.1 install/Users/Jonathan/Documents/sites/wkux/ct -html-lib/node_modules/gulp-sass/node_modules/node-sass

节点脚本/ install.js

无法从https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/darwin-x64-node-4.0/binding.node下载文件

node-sass@2.1.1 postinstall/Users/Jonathan/Documents/sites/wkux/ct -html-lib/node_modules/gulp-sass/node_modules/node-sass

node scripts/build.js

gyp:/Users/Jonathan/.node-gyp/4.0.0/common.gypi未找到(cwd:/ Users/Jonathan/Documents/sites/wkux/ct-html-lib/node_modules/gulp-sass/node_modules/node -sass)在尝试加载binding.gyp时读取包含binding.gyp

gyp ERR!配置错误

gyp ERR!堆栈错误:gyp退出代码失败:1

gyp ERR!在ChildProcess.onCpExit堆栈(/Users/Jonathan/Documents/sites/wkux/ct-html-lib/node_modules/gulp-sass/node_modules/node-sass/node_modules/pangyp/lib/configure.js:346:16)

gyp ERR!堆栈在emitTwo(events.js:87:13)

gyp ERR!在ChildProcess.emit堆栈(events.js:172:7)

gyp ERR!Process.ChildProcess._handle.onexit(internal/child_process.js:200:12)中的堆栈

gyp ERR!系统达尔文14.5.0

gyp ERR!命令"/ usr/local/bin/node""/ Users/Jonathan/Documents/sites/wkux/ct-html-lib/node_modules/gulp-sass/node_modules/node-sass/node_modules/pangyp/bin/node-gyp ""重建"

gyp ERR!cwd/Users/Jonathan/Documents/sites/wkux/ct -html-lib/node_modules/gulp-sass/node_modules/node-sass

gyp ERR!node -v v4.0.0

gyp ERR!pangyp -v v2.3.2

gyp ERR!不好

构建失败

所有其他节点模块似乎都安装得很好.它与node-sass的东西在gulp-sass中引起了问题.

这是我目前gulpfile.js的监视列表

// Gulp watchlist
gulp.task('watch', ['browserSync', 'sass'], function(){
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/*.html').on('change', browserSync.reload);
    gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
    //add more watchers here
});

这很有效.

但是我关注的教程有一些不同之处:

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload); 
});

我需要.on('更改',browserSync.reload)吗？有用; 我只是好奇我的工作是不是很好的做法.谢谢!

我试图将我的所有样式(css,scss)文件合并到一个文件中并进行编译.原因是因为存在基于另一个文件中的变量的文件,但现在我无法创建源图.

我究竟做错了什么？有更好的解决方案吗？

const gulp = require('gulp');
const debug = require('gulp-debug');
const sass = require('gulp-sass');
const concat = require('gulp-concat');  
const uglify = require('gulp-uglify');  
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const addsrc = require('gulp-add-src');
const sourcemaps = require('gulp-sourcemaps');
const ngmin = require('gulp-ngmin');
const browserSync = require('browser-sync');

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('app/**/*.scss', ['styles']);
    gulp.watch('app/**/*.js', ['app-scripts']);
    gulp.watch('app/components/**/*.html', ['components-html']);
    gulp.watch('app/views/**/*.html', ['view-html']);
    gulp.watch('app/index.html', ['copy-index-html']);
    gulp.watch('app/json/**/*.json', ['copy-jsons']);
});

gulp.task('styles', () => 
    gulp.src([
        'app/style/vendors/*.css',
        'app/style/utils/*.scss',
        'app/style/base/*.scss',
        'app/style/layout/*.scss',
        'app/components/**/*.scss',
        'app/views/**/*.scss'
    ])
    .pipe(concat('styles.scss'))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/style'))
); …

npm ERR! code EBADPLATFORM

npm ERR! notsup Unsupported platform for inotify@1.4.2: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! notsup Valid OS:    linux

npm ERR! notsup Valid Arch:  any

npm ERR! notsup Actual OS:   win32

npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2018-11-14T06_22_08_427Z-debug.log

我有以下gulp任务:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.src('html/css/sass/*.scss')
    .pipe(sass({
        style: 'compressed',
        loadPath: 'plugin/css/sass',
        sourcemap: true,
        sourcemapPath: '/css/sass',
        container : 'local_sass'
    }))
    .pipe(autoprefixer())
    .pipe(gulp.dest('html/css'));

我遇到的问题是SASS编译器正确生成源图并添加源图注释,但随后autoprefixer删除了注释(我不认为它也在更新源图).

我已经尝试删除autoprefixer并且它工作正常,但当我把它放回去时,他们的评论被删除了.我也试过添加{ map: true },但是每个源映射都有这个名字to.css.map.我也试过添加from,to但我不知道如何告诉它当前的文件名,所以它总是写入相同的文件名.

我如何获得autoprefixer来合作和更新源图？我需要使用另一个插件吗？

包:

"gulp": "~3.8.6",
"gulp-autoprefixer": "~0.0.8",
"gulp-ruby-sass": "~0.7.0",

我正在尝试学习如何使用gulp/sass /和Nodejs的所有其他有趣的工具,我在安装gulp-sass时遇到问题.我用来安装一切的过程是:

1.  Start Git Bash in the project folder
2.  npm init
3.  npm install gulp -g
4.  npm install gulp --save-dev
5.  npm install gulp-sass <- this is where I get errors

一旦我进入第五步,我收到以下错误:

$ npm install gulp-sass
npm WARN package.json project@1.0.0 No repository field.
npm WARN package.json project@1.0.0 No README data
-
> node-sass@3.2.0 install     \\primary\home\mendsley\profile\Desktop\project\node_modules\gulp-  sass\node_modules\node-sass
> node scripts/install.js

'\\primary\home\mendsley\profile\Desktop\project\node_modules\gulp-   sass\node_modules\node-sass'
CMD.EXE was started with the above path as the current directory.
UNC paths are not supported. …

如何为NPM项目编写自己的终端命令,这将取代gulp命令而不依赖于npm run？

我的项目包含以下Gulp和http-server自定义命令......

## COMMANDS I CURRENTLY HAVE
|        Command        |            Task             |
|-----------------------|-----------------------------|
|      npm run boom     | "Builds then watches files" |
| npm run boom -- build |  "Builds the assets files"  |
|    npm run launch     |   "Starts a local server"   |

这是因为scripts它的package.json文件......

/// package.json
{
  "scripts": {
    "boom": "gulp",
    "launch": "http-server -o"
  },
    "devDependencies": {
      "gulp": "^3.9.0",
      "gulp-sass": "^2.1.0",
      "http-server": "^0.8.5"
    }
} …

我正在生成几个列类，其宽度在 Sass 地图中定义，如下所示：

$column-widths: 5 10 20 25 30 33 40 50 60 66 70 80 90 100;

@each $width in $column-widths {
  .column-#{$width} {
    width: #{$width}%;
  }
}

但是，我在编译时收到此错误：

Error in plugin 'sass'
Message:
    grid.scss
Error: Invalid CSS after "...dth: #{$width}%": expected expression (e.g. 1px, bold), was ";"
        on line 10 of grid.scss
>>       width: #{$width}%;
   ----------------------^

看起来它没有按照我预期的方式解释这一点。我想在百分号之前插入数值。但我认为它将它们作为字符串读取，然后尝试评估百分比并感到困惑。

在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 ()); ^错误:缺少绑定C:\ Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject \node_modules \node-sass\vendor\win32-x64-47\binding.node Node Sass找不到绑定当前环境:带有Node.js 5.x的Windows 64位找到以下环境的绑定: - 带有Node.js 7.x的Windows 64位这通常是因为您的环境自运行以来已更改npm install.运行npm rebuild node-sass以构建当前环境的绑定.

我确实npm rebuild node-sass在我的项目文件夹的根目录中运行但仍然遇到了同样的错误.这是我跑完后得到的npm rebuild node-sass:

二进制文件位于C:\ Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject \node_modules \node-sass\vendor\win32-x64-51\binding.node测试二进制二进制文件很好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 …

我正在使用推荐的版本Node.js 10，只是试图运行一个简单的gulp任务来编译一些SCSS文件。但是，我收到以下错误。

Node Sass找不到您当前环境的绑定：具有Node.js 10.x的Windows 64位已找到以下环境的绑定：-具有Node.js 8.x的Windows 64位

这里完全错误

Failed to run "C:\Users\lee\Documents\Projects\Merch.Umb\Src\Merch.Web\Gulpfile.js"... cmd.exe /c gulp --tasks-simple C:\Users\lee\Documents\Projects\Merch.Umb\Src\Merch.Web\node_modules\node-sass\lib\binding.js:15
      throw new Error(errors.missingBinary());
      ^ Error: Missing binding C:\Users\lee\Documents\Projects\Merch.Umb\Src\Merch.Web\node_modules\node-sass\vendor\win32-x64-64\binding.node Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 10.x Found bindings for the following environments:
  - Windows 64-bit with Node.js 8.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports …