linux - grunt watch/sass 无法正常工作

标签 linux sass gruntjs watch

这是我第一次尝试使用 grunt 创建工作流程,我已经成功完成了几乎所有工作,但是当我运行 grunt 时,sass 的监视任务什么也不做,只是输出文件已更改,那就是没有错误代码

gruntfile.js:

'use strict';

module.exports = function(grunt) {

// All configuration goes here
grunt.initConfig({

    //jekyll tasks

    jekyll: {
    //Builds jekyll to local development
        dist: {
            options: {
                config: '_config_dev.yml',
                dest: './_local',
            }
        },
    //Builds jekyll for deploying
        live: {
            options: {
                config: '_config.yml',
                dest: './_live',
            }
        }
    },

    //jshint task

    jshint: {
        options: {
            jshintrc: '.jshintrc'
        },
        all: [
            './!Gruntfile.js',
            './assets/js/*.js',
            './assets/js/plugins/*.js',
            './!assets/js/scripts.min.js'
        ]
    },

    // Uglify
    uglify: {
        dist: {
            files: {
                './assets/js/scripts.min.js': [
                './assets/js/plugins/*.js',
                './assets/js/_*.js'
                ]
            }
        }
    },

    //imagemin task
    imagemin: {
        dist: {
            options: {
                optimizationLevel: 7,
                progressive: true
            },
        files: [{
            expand: true,
            cwd: './img/',
            src: '{,*/}*.{png,jpg,jpeg}',
            dest: './img/'
            }]
        }       
    },

    //svgmin task
    svgmin: {
        dist: {
            files: [{
                expand: true,
                cwd: './img/',
                src: '{,*/}*.svg',
                dest: './img/'
            }]
        }
    },

    //Sass tasks

    sass: {
        //Compiles sass to css for local test
        dist: {
            files: [{
                expand: true,
                cwd: 'assets/sass/',
                src: ['**/*.scss'],
                dest: 'assets/css/',
                ext: '.css'
            }]
        },
        //Compiles sass to css for live deployment
        live: {
            options: {
                style: 'compressed'
            },
            files: [{
                expand: true,
                cwd: 'assets/sass',
                src: ['**/*.scss'],
                dest: 'assets/css',
                ext: '.css'
            }]
        },
        //Compiles sass for browser sync
        style: {
            options: {
                style: 'compressed'
            },
            files: [{
                expand: true,
                cwd: 'assets/sass',
                src: ['**/*.scss'],
                dest: 'assets/css',
                ext: '.css'
            }]
        },

    },

    //Watch tasks
    watch: {

        scss: {
            files: 'assets/sass/*.scss',
            task: ['clean', 'sass:dist'],
            options: {
                spaw: false,
                },
        },
        style: {
            files: 'assets/sass/*.scss',
            task: ['sass:style'],
        },
        js: {
            files: [
                    '<%= jshint.all %>'
                    ],
            tasks: ['jshint','uglify'],
            },
        jekyll: {
            files: [
                    '_layouts/*.html', 
                    '_includes/*.html', 
                    'assets/css/main.css', 
                    '*.html', 
                    '*.md', 
                    '_post/*.md'
                    ],
            tasks: ['jekyll:dist'],
        },
        livereload: {
            options: {
                livereload: true,
            },
            files: [
                    '_local/**'
                    ],
                },
        },  

    //Clean task
    clean: {
        dist: [
            'assets/css/main.css',
            'assets/js/scripts.min.js'
        ]   
    },

    //Server
    connect: {
        server : {
            options: {
                livereload: true,
                base : './_local/',
                port: 4000
        }
    }
}



});

// Load the plugins

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-svgmin');  
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-clean');


// Custom tasks
grunt.registerTask('dev', ['clean', 'sass:dist', 'uglify', 'imagemin','svgmin', 'jekyll:dist', 'connect:server', 'watch']);
grunt.registerTask('default', ['clean', 'sass:live', 'uglify','imagemin', 'svgmin', 'jekyll:live']);
grunt.registerTask('css', ['clean', 'sass:dist', 'uglify', 'imagemin','svgmin', 'jekyll:dist', 'connect:server', 'watch:style']);

};

我的文件结构如下:

gruntfile.js
assets/
      css/
      sass/

这是运行 grunt dev 任务时终端的输出,因为您没有看到任何变化

┌[~/git/Nutricorp] [dev *]← →[*+?] 
└[ % ± ]>> grunt dev -v                                                                                                                                                         O_O 
Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK

Registering "grunt-contrib-watch" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-watch/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-watch/package.json...OK
Loading "watch.js" tasks...OK
+ watch

Registering "grunt-contrib-imagemin" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-imagemin/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-imagemin/package.json...OK
Loading "imagemin.js" tasks...OK
+ imagemin

Registering "grunt-contrib-connect" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-connect/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-connect/package.json...OK
Loading "connect.js" tasks...OK
+ connect

Registering "grunt-svgmin" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-svgmin/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-svgmin/package.json...OK
Loading "svgmin.js" tasks...OK
+ svgmin

Registering "grunt-contrib-jshint" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-jshint/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-jshint/package.json...OK
Loading "jshint.js" tasks...OK
+ jshint

Registering "grunt-contrib-uglify" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-uglify/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-uglify/package.json...OK
Loading "uglify.js" tasks...OK
+ uglify

Registering "grunt-jekyll" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-jekyll/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-jekyll/package.json...OK
Loading "jekyll.js" tasks...OK
+ jekyll

Registering "grunt-contrib-sass" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-sass/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-sass/package.json...OK
Loading "sass.js" tasks...OK
+ sass

Registering "grunt-contrib-clean" local Npm module tasks.
Reading /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-clean/package.json...OK
Parsing /home/cruznick/git/Nutricorp/node_modules/grunt-contrib-clean/package.json...OK
Loading "clean.js" tasks...OK
+ clean
Loading "Gruntfile.js" tasks...OK
+ css, default, dev

Running tasks: dev

Running "dev" task

Running "clean" task

Running "clean:dist" (clean) task
Verifying property clean.dist exists in config...OK
Files: assets/css/main.css -> dist
Options: force=false, no-write=false
Options: force=false, no-write=false
Cleaning assets/css/main.css...OK

Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: assets/sass/_config.scss -> assets/css/_config.css
Files: assets/sass/_grids.scss -> assets/css/_grids.css
Files: assets/sass/_main-page.scss -> assets/css/_main-page.css
Files: assets/sass/_menu.scss -> assets/css/_menu.css
Files: assets/sass/main.scss -> assets/css/main.css
Options: (none)
Writing assets/css/main.css...OK
File assets/css/main.css created.

Running "uglify" task

Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: [no src] -> ./assets/js/scripts.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="min"
>> Destination ./assets/js/scripts.min.js not written because src files were empty.

Running "imagemin" task

Running "imagemin:dist" (imagemin) task
Verifying property imagemin.dist exists in config...OK
Options: cache, optimizationLevel=7, progressive
Minified 0 images (saved 0 B)

Running "svgmin" task

Running "svgmin:dist" (svgmin) task
Verifying property svgmin.dist exists in config...OK
Options: (none)
Total saved: 0 B

Running "jekyll:dist" (jekyll) task
Verifying property jekyll.dist exists in config...OK
File: [no files]
Options: config="_config_dev.yml", dest="./_local"
`jekyll build --destination ./_local --config _config_dev.yml` was initiated.


Jekyll output:
Configuration file: _config_dev.yml
            Source: /home/cruznick/git/Nutricorp
       Destination: ./_local
      Generating... done.

Running "connect:server" (connect) task
Verifying property connect.server exists in config...OK
File: [no files]
Options: protocol="http", port=4000, hostname="0.0.0.0", base="./_local/", directory=null, keepalive=false, debug=false, livereload, open=false, useAvailablePort=false, middleware=null
Started connect web server on http://0.0.0.0:4000

Running "watch" task
Waiting...Verifying property watch exists in config...OK
Verifying property watch.scss.files exists in config...OK
Verifying property watch.style.files exists in config...OK
Verifying property watch.js.files exists in config...OK
Verifying property watch.jekyll.files exists in config...OK
Live reload server started on port: 35729
Watching assets/sass/_config.scss for changes.
Watching assets/sass/_grids.scss for changes.
Watching assets/sass/_main-page.scss for changes.
Watching assets/sass/_menu.scss for changes.
Watching assets/sass/main.scss for changes.
Watching assets/sass/_config.scss for changes.
Watching assets/sass/_grids.scss for changes.
Watching assets/sass/_main-page.scss for changes.
Watching assets/sass/_menu.scss for changes.
Watching assets/sass/main.scss for changes.
Watching _layouts/main.html for changes.
Watching _includes/head.html for changes.
Watching _includes/menu.html for changes.
Watching assets/css/main.css for changes.
Watching index.html for changes.
Watching .git for changes.
Watching .sass-cache for changes.
Watching _includes for changes.
Watching _layouts for changes.
Watching _live for changes.
Watching _local for changes.
Watching _locales for changes.
Watching _plugins for changes.
Watching _posts for changes.
Watching assets for changes.
Watching img for changes.
Watching node_modules for changes.
Watching README.md for changes.
OK
>> File "assets/sass/_menu.scss" changed.

Live reloading assets/sass/_menu.scss...
Live reloading assets/sass/_menu.scss...
Completed in 0.002s at Thu Mar 27 2014 08:02:04 GMT-0600 (CST) - Waiting...

我不知道为什么它不起作用,没有错误消息,有任何想法,提前致谢 ps:还尝试了 grunt contrib compass,但它不起作用我正在使用 ruby​​ 2.1.0p0 运行 archlinux,并且安装了 sass 和 compass gems,其他一切都很好 ps2:如果这很重要的话,我的 shell 是 zsh

最佳答案

在您的 watch 配置中,您有 task: 而不是 tasks:

指定该属性的关键是复数。

关于linux - grunt watch/sass 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22691916/

相关文章:

linux - AWS 是否在 SSH 连接中保存客户端的 IP?

Linux - 禁用缓冲 I/O 到子进程中的文件

css - 波旁整洁的多个断点

twitter-bootstrap - 如何在 rails/sass 中重用(扩展) Bootstrap css 类

javascript - 使用 grunt build 的 JS 文件上图像的引用名称

css - 试图将所有 scss 文件编译成一个 css 文件

文件描述符引用的对象的引用计数

c++ - Qt5.5静态构建在ubuntu14上找不到-IGL

css - 无法禁用 SASS 缓存

javascript - Grunt、Gulp.js 和 Bower 之间有什么区别?为什么以及何时使用它们?