咕unt响应式图像不输出,不给出错误

时间:2018-11-28 00:23:59

标签: javascript node.js gruntjs graphicsmagick

所以我不是最精通的人,但这使我陷入了困境。当我运行grunt响应式图像任务时,该任务运行良好,但没有输出任何内容到我的目标文件夹...

这是错误部分:

error-1

这是文件夹树:

folder-tree

我的Gruntfile.js中还有其他任务正在运行,因此响应_images任务就是这样。

完整代码

/**
 * gruntfile.js
 *
 * original code from jeff1evesque @ https://gist.github.com/jeff1evesque/b98560d6c4d9914049f9
 * modified as needed
 */

module.exports = function (grunt) {

  grunt.initConfig({

  // Watch task configuration
    watch: {
      css: {
        files: 'src/scss/*.scss',
        tasks: ['sass'],
      },
      js: {
        files: 'src/js/*.js',
        tasks: ['uglify'],
      },
      img: {
        files: 'src/img/*.{png,jpg,gif}',
        tasks: ['responsive_images', 'imagemin'],
      },
      html: {
        files: 'src/*.html',
        tasks: ['htmlmin'],
      }
    },

  // Sass task configuration
    sass: {
      dist: {
        files: [{
          expand: true,               // enable dynamic expansion
          cwd: 'src/scss/',
          src: ['**/*.scss'],
          dest: 'dist/public/css/',
          ext: '.min.css',            // dest filepaths will have this extension
          extDot: 'first',            // extensions in filenames begin after the first dot
        }],
        options: {
          style: 'compressed'
        },
      },
    },

  // Uglify task configuration
    uglify: {
      my_target: {
        files: [{
          expand: true,               // enable dynamic expansion
          cwd: 'src/js/',
          src: ['**/*.js'],
          dest: 'dist/public/js/',
          ext: '.min.js',             // dest filepaths will have this extension
          extDot: 'last',             // extensions in filenames begin after the last dot
        }],
      },
    },

    // Resize and save all images
    responsive_images: {
      dev: {
        options: {
          engine: 'gm',
          sizes: [{
            name: '320',
            quality: 100,
            width: 320
          },{
            name: '440',
            quality: 100,
            width: 440
          },{
            name: '680',
            quality: 100,
            width: 680
          },{
            name: '1024',
            quality: 100,
            width: 1024
          },{
            name: '1200',
            quality: 100,
            width: 1200
          }]
        },
        files: [{
          expand: true,
          cwd: 'src/img/',
          src: ['*.{jpg,gif,png}'],
          dest: 'dist/public/img/',
        }]
      }
    },

  // Copy images to new destination

  // copy: {
  //   dev: {
  //     files: [{
  //       expand: true,
  //       src: ['**/*'],
  //       cwd: 'src/img',
  //       dest: 'dist/public/img'
  //     }]
  //   }
  // },

  // Imagemin task configuration
    imagemin: {
      dynamic: {
        files: [{
          expand: true,               // enable dynamic expansion
          cwd: 'src/img/',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'dist/public/img/',
        }],
      },
    },

  //Htmlmin task configuration
    htmlmin: {
      dist: {
        options: {
          removeComments: true,
          collapseWhitespace: true
        },
        files: [{
          expand : true,
          cwd : 'src',
          src : '**/*.html',
          dest : 'dist/public'
        }]
      },
      // dev: {
      //   files: [{
      //     expand: true,
      //     cwd: 'app',
      //     src: ['src/**/*.html', '*.html'],
      //     dest: 'dist/'
      //   }]
      // },
    },

  });

  // Load Plug-ins
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');

  // Register Tasks: used as commands
  grunt.registerTask('build-sass', ['sass', 'watch']);
  grunt.registerTask('build-uglify', ['uglify', 'watch']);
  grunt.registerTask('build-img', ['responsive_images']);
  // grunt.registerTask('build-copy', ['copy', 'watch']);
  grunt.registerTask('build-imagemin', ['imagemin']);
  grunt.registerTask('build-htmlmin', ['htmlmin', 'watch']);
  grunt.registerTask('default', ['sass', 'uglify', 'responsive_images','imagemin', 'htmlmin', 'watch']);
};

这只是response_images任务

module.exports = function (grunt) {
  grunt.initConfig({
  // Watch task configuration
    watch: {
      img: {
        files: 'src/img/*.{png,jpg,gif}',
        tasks: ['responsive_images'],
      }
    },

    // Resize and save all images
    responsive_images: {
      dev: {
        options: {
          engine: 'gm',
          sizes: [{
            name: '320',
            quality: 100,
            width: 320
          },{
            name: '440',
            quality: 100,
            width: 440
          },{
            name: '680',
            quality: 100,
            width: 680
          },{
            name: '1024',
            quality: 100,
            width: 1024
          },{
            name: '1200',
            quality: 100,
            width: 1200
          }]
        },
        files: [{
          expand: true,
          cwd: 'src/img/',
          src: ['*.{jpg,gif,png}'],
          dest: 'dist/public/img/',
        }]
      }
    }

  });
  // Load Plug-ins
  grunt.loadNpmTasks('grunt-responsive-images');
  // Register Tasks: used as commands
  grunt.registerTask('build-img', ['responsive_images']);
  grunt.registerTask('default', ['responsive_images', 'watch']);
};

我已经检查了package.json和package-lock.json,一切似乎都按顺序进行,包括版本控制。

Grunt 1.0.3版 grunt-response-images v.1.10.1 GraphicsMagick v.1.3.31 操作系统Windows 10

请谢谢。

0 个答案:

没有答案