Question

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

我的问题：

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

grunt

或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，它是一个非常棒的应用程序。我想转移到咕噜声，但也许我的配置文件不正确我很接近。

非常感谢任何帮助。

尼尔

Answer 1

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

首先，SASS任务在监视期间不起作用的原因是由于files条目指向错误的位置。您当前的文件条目指向“css”文件夹，但它应指向“scss”文件夹，根据您在实际“sass”任务中指定的内容。换句话说，您的输入应为：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

Grunt SCSS - 不重新加载

1 个答案: