大佬教程收集整理的这篇文章主要介绍了node.js – Grunt Compass不会创建CSS文件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
“您必须从项目目录中编译单个样式表.”
我用3种不同的方式尝试了它.更多下面.
我的文件夹结构:
test \ Gruntfile.js package.json \ node_modules \ \ _src \ (this is the root folder of my jekyll sitE) \ config.rb \ index.html \ static/ \ _sass \ \ css \ \ images \ \ js \
什么有效:
一切正常,不使用grunt并使用/_src/config.rb:
#project_path = "_src/" http_path = "/" css_dir = "css" css_path = "static/" + css_dir sass_dir = "_sass" sass_path = "static/" + sass_dir images_dir = "images" images_path = "static/" + images_dir output_style = :expanded relative_assets = true line_comments = false
所以,在/ src中我可以用罗盘手表编译得很好.
什么行不通
无论如何,我决定放弃所有的GUI应用程序并用grunt加强它.这就是问题开始的地方.
我也是最新的:
$grunt --version >> grunt-cli v0.1.13 $npm -v >> 1.4.3 $node -v >> v0.10.26
第一次尝试
我尝试的第一件事是尝试使用现有的config.rb:
@H_587_13@module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),// Config watch: { compass: { files: ['**/*.{scss,sass}'],tasks: ['compass:dev'] },js: { // PLACEHOLDER HERE } },compass: { dev: { // dev options // ↓↓↓ HERE'S THE COMPASS CONfig FILE ↓↓↓ options: { config: '_src/config.rb' } },prod: { // prod options },},jshint: { options: { jshintrc: '.jshintrc' },all: ['Gruntfile.js','_src/static/js/*.js'] },browserSync: { files: { src : [ '_src/static/css/*.css','_src/static/images/*','_src/static/js/*.js','_src/**/*.html' ],options: { watchTask: true } } }); // Load the Grunt plugins. grunt.loadNpmTasks('grunt-contrib-compress'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-browser-sync'); // Register the default tasks. grunt.registerTask('default',['compass:dev','browserSync','watch']); grunt.registerTask('prod',['compass:prod']); };
从/ test运行grunt没有错误,它甚至可以识别文件更改,但不编译我的sass.没有创建css文件.
我尝试了咕噜咕噜的指南针–verbose并且它中止了:
Running "compass:prod" (compass) task Verifying property compass.prod exists in config...oK File: [no files] Options: cssDir=["_src/static/css"],sassDir=["_src/static/_sass"],imagesDir=["_src/static/images"],javascriptsDir=["_src/static/js"],fontsDir=["_src/static/fonts"],outputStyle="compressed",relativeAssets="true",noLineComments="true" Options: cssDir=["_src/static/css"],noLineComments="true",time You must compile individual stylesheets from the project directory. Warning: ↑ Use --force to conTinue. Aborted due to warnings.
……我完全不知道.
第二次尝试 – 首选尝试
因为我不喜欢在/ _src /中使用COnfig.rb,所以我删除了它并在Gruntfile.js中替换了选项:{Config:’_ src / config.rb’}:
options: { //config: '_src/config.rb' cssDir: ['_src/static/css'],sassDir: ['_src/static/_sass'],imagesDir: ['_src/static/images'],javascriptsDir: ['_src/static/js'],fontsDir: ['_src/static/fonts'],outputStyle: 'expanded',relativeAssets: 'true',noLineComments: 'false' }
错误与前者完全相同:
第3次尝试
作为最后的手段,我尝试将config.rb放在root(/ test)中添加project_path =“_ src”并在Gruntfile中使用选项:{Config:’config.rb’}.这确实和我的其他试验一样差.
我真的很喜欢Gruntfile-only版本.我猜罗盘的基本路径不是很好,但无法弄清楚要做什么.
我已经在StackExchange上阅读的内容摘录来解决这个问题
我已经读过:
> build automation – Grunt compass task not compatible with this directory structure? – Stack Overflow
>尝试了relativeAssets:’false’技巧
>这里没有新想法.我的目录对于Sass,CSS,JS等都是不同的.
> build automation – Grunt compass task not compatible with this directory structure? – Stack Overflow
>@R_874_9812@于我的问题.但OP希望使用COnfig.rb文件,并希望将其置于其文件夹结构中.
>罗盘唯一的问题,罗盘初始化为解决方案.不过,我的指南针在没有咕噜声的情况下使用.所以我驳回了这个.
PS:我也使用RVM和Git.但我猜这些并不重要.
更新:
小步骤…一些进步(不是真的):
/Gruntfile.js
compass: { dev: { // dev options options: { config: 'config.rb',cssDir: '_src/static/css',sassDir: '_src/static/_sass' } },
我不明白为什么添加config.rb(而不是像上面的“第二次尝试”一样把它全部写下来改变所有内容并且grunt决定最终输出一个css文件.
/config.rb
http_path = "/" css_dir = "static/css" sass_dir = "static/_sass" images_dir = "static/images" javascript_dir = "static/js" fonts_dir = "static/fonts" relative_assets = false
上海社会科学院:
.logo { BACkground-image: image-url($logo); //width: image-width($logo); //height: image-height($logo); }
渲染CSS:
// relative_assets = true // image still shows up,but it's not the sites root // /test/_src/static/images ==> _src should be the root BACkground-image: url('../../../static/images/gaya-design-logo.png'); // relative_assets = false BACkground-image: url('/static/images/gaya-design-logo.png');
WARNING: 'gaya-design-logo.png' was not found (or cAnnot be read) in /Users/pattulus/Sites/test/static/images
这是“很好”,因为我在使用常规罗盘手表时也会得到这个.然而,随着grunt,当我取消注释SASS代码中的两行时,它会中止吐出:
Errno::ENOENT on line ["28"] of /Users/pattulus/.rvm/gems/ruby-2.0.0-p451@test/gems/compass-0.12.6/lib/compass/sass_extensions/functions/image_size.rb: No such file or directory - /Users/patte/Sites/test/static/images/gaya-design-logo.png
奇怪,因为“普通罗盘”的工作原理.我没有全局安装指南针,gem只在此项目文件夹中处于活动状态.因此排除了这种可能性.
我在“第二次尝试”中的错误就是把布尔值放在这个relativeAssets:’false’中,而不是relativeAssets:false.
那和一些调整basePath和“更多”.
@H_587_13@module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),compass: { dev: { // dev options options: { httpPath: '/',basePath: '_src',cssDir: 'static/css',sassDir: 'static/_sass',imagesDir: 'static/images',javascriptsDir: 'static/js',fontsDir: 'static/fonts',relativeAssets: false,noLineComments: false } },jshint: { options: { jshintrc: '.jshintrc' },options: { watchTask: true } } }); // Load the Grunt plugins. grunt.loadNpmTasks('grunt-contrib-compress'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-browser-sync'); // Register the default tasks. grunt.registerTask('default',['compass:prod']); };
这肯定是漫长的一天……事实上我一直试图让这个运行从周五开始就像这样(使用browserSync和整个战利品).希望能帮助下一个人.
以上是大佬教程为你收集整理的node.js – Grunt Compass不会创建CSS文件全部内容,希望文章能够帮你解决node.js – Grunt Compass不会创建CSS文件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。