1

我正在努力实现顺畅的工作流程。

我的问题：

我的 JS 修改显示并缩小，实时重新加载工作正常。当我对我的 SCSS 文件进行更改时，它们不会在运行命令下运行：

grunt

或咕噜插件：

grunt watch

它仅在我调用时有效：

grunt sass

这是“grunt sass”控制台窗口的输出：

Macintosh:grunt-test Neil$ grunt sass
Running "sass:dist" (sass) task
File "css/global.css" created.

Done, without errors.

笔记：

当我在 sass 文件上运行“grunt watch”时，我注意到 grunt 无缘无故地在 javascript 上运行缩小。当该文件或其依赖项之一受到影响时，肯定会调用它吗？

Gruntfile.js 内容：

module.exports = function(grunt) {

// 1. All configuration goes here 
grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    watch: {
        options: {
            files: ['css/*.css'],
            livereload: true
        },

        css: {
            files: ['css/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false,
            }
        },

        scripts: {
            files: ['js/*.js', 'scss/*.scss'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },

            expand: true,
            cwd: 'scss/',
            src: ['*.scss'],
            dest: 'css/',
            ext: '.css'
        }
    },

    concat: {
        // 2. Configuration for concatinating files goes here.

        dist: {
            src: [
                'js/libs/*.js', // All JS in the libs folder
                'js/global.js'  // This specific file
            ],
            dest: 'js/build/production.js',
        }
    },

    uglify: {
        build: {
            src: 'js/build/production.js',
            dest: 'js/build/production.min.js'
        }
    },

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images-lossy/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'images/'
            }]
        },

        png: {
            options: {
                optimizationLevel: 7
            }
        },

        jpg: {
            options: {
                progressive: true
            }
        }
    }
});

// 3. Where we tell Grunt we plan to use this plug-in.

// CONCATENATION PLUGIN
grunt.loadNpmTasks('grunt-contrib-concat');
// MINIFY PLUGIN
grunt.loadNpmTasks('grunt-contrib-uglify');
// IMG CRUSH PLUGIN
grunt.loadNpmTasks('grunt-contrib-imagemin');
// GRUNT WATCH PLUGIN
grunt.loadNpmTasks('grunt-contrib-watch');
// SASS LIBARY PLUGIN
grunt.loadNpmTasks('grunt-contrib-sass');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']);

};

我希望以上信息对您有所帮助。我以前使用过 Codekit，它是一个非常棒的应用程序。我想转向 grunt，但也许我的配置文件不正确，我很接近。

任何帮助将不胜感激。

  • 尼尔
4

1 回答 1

1

看起来您的两个问题都发生在watch配置中。

首先，SASS 任务在监视期间不工作的原因是由于files条目指向错误的位置。根据您在实际“sass”任务中指定的内容，您当前的文件条目指向“css”文件夹，但它应该指向“scss”文件夹。换句话说，您的条目应该是：files: ['scss/*.scss'].

css: {
  files: ['scss/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false,
  }
}

其次，每当 SASS 文件发生更改时，JavaScript 都会在监视期间发生缩小，因为您将其列在此处：

scripts: {
  files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here
  tasks: ['concat', 'uglify'],
  options: {
    spawn: false,
  }
}

将其更改files: ['js/*.js'],为仅对 JavaScript 文件启动监视任务。

一旦你解决了这些问题，如果事情稍微有效，你可能想要扩展模式，以便它涵盖 JavaScript、CSS、SASS 等子目录中的所有文件。例如，js/*.js包括文件夹.js下的所有文件js，同时js/**/*.js涵盖js文件夹及其子文件夹。您可以在 GruntJS “globbing patterns”文档下阅读更多内容。

编辑：这是更新后的watch样子......

watch: {
    options: {
        livereload: true
    },

    // css is really for Sass
    css: {
        files: ['scss/*.scss'],
        tasks: ['sass'],
        options: {
            spawn: false,
        }
    },
    // scripts will detect js changes
    scripts: {
        files: ['js/**/*.js'],
        tasks: ['jshint', 'concat', 'uglify'],
        options: {
            spawn: false,
        }
    }
},

如前所述，您的个人任务可能需要使用**类似于我对上面的“脚本”条目所做的模式：js/**/*.js

于 2014-01-06T01:05:39.630 回答