代码之家  ›  专栏  ›  技术社区  ›  Kyle Pennell

如何防止Grunt更改我的文件和编辑?

  •  1
  • Kyle Pennell  · 技术社区  · 10 年前

    Grunt/Bower/Yeoman新手。真的很沮丧,不知道出了什么问题。猜测这是一个基本问题。

    在我的HTMl中,有些部分我的文件有两个源文件条目。

    <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="bower_components/leaflet-dist/leaflet.css" />
    

    我试着去掉其中一个,但当我走的时候 grunt server ,它会将文件更改为原来的状态。

    一个人怎么能对他们的文件进行修改,而不让咕噜们把它们改回去呢?告诉我这与wiredep任务有关。我怎么能不弄乱我的文件呢?这是怎么回事?

    下面的垃圾堆 。似乎在评论 wiredep 但这似乎是一种草率的做法:

    module.exports = function (grunt) {
    
      // Load grunt tasks automatically
      require('load-grunt-tasks')(grunt);
    
      // Time how long tasks take. Can help when optimizing build times
      require('time-grunt')(grunt);
    
      // Configurable paths for the application
      var appConfig = {
        app: require('./bower.json').appPath || 'app',
        dist: 'dist'
      };
    
      // Define the configuration for all the tasks
      grunt.initConfig({
    
        // Project settings
        yeoman: appConfig,
    
        // Watches files for changes and runs tasks based on the changed files
        watch: {
          bower: {
            files: ['bower.json']
            //,
            //tasks: ['wiredep']
          },
          js: {
            files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
            tasks: ['newer:jshint:all'],
            options: {
              livereload: '<%= connect.options.livereload %>'
            }
          },
          jsTest: {
            files: ['test/spec/{,*/}*.js'],
            tasks: ['newer:jshint:test', 'karma']
          },
          styles: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
            tasks: ['newer:copy:styles', 'autoprefixer']
          },
          gruntfile: {
            files: ['Gruntfile.js']
          },
          livereload: {
            options: {
              livereload: '<%= connect.options.livereload %>'
            },
            files: [
              '<%= yeoman.app %>/{,*/}*.html',
              '.tmp/styles/{,*/}*.css',
              '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
          }
        },
    
        // The actual grunt server settings
        connect: {
          options: {
            port: 9000,
            // Change this to '0.0.0.0' to access the server from outside.
            hostname: 'localhost',
            livereload: 35729
          },
          livereload: {
            options: {
              open: true,
              middleware: function (connect) {
                return [
                  connect.static('.tmp'),
                  connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                  ),
                  connect.static(appConfig.app)
                ];
              }
            }
          },
          test: {
            options: {
              port: 9001,
              middleware: function (connect) {
                return [
                  connect.static('.tmp'),
                  connect.static('test'),
                  connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                  ),
                  connect.static(appConfig.app)
                ];
              }
            }
          },
          dist: {
            options: {
              open: true,
              base: '<%= yeoman.dist %>'
            }
          }
        },
    
        // Make sure code styles are up to par and there are no obvious mistakes
        jshint: {
          options: {
            jshintrc: '.jshintrc',
            reporter: require('jshint-stylish')
          },
          all: {
            src: [
              'Gruntfile.js',
              '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
          },
          test: {
            options: {
              jshintrc: 'test/.jshintrc'
            },
            src: ['test/spec/{,*/}*.js']
          }
        },
    
        // Empties folders to start fresh
        clean: {
          dist: {
            files: [{
              dot: true,
              src: [
                '.tmp',
                '<%= yeoman.dist %>/{,*/}*',
                '!<%= yeoman.dist %>/.git*'
              ]
            }]
          },
          server: '.tmp'
        },
    
        // Add vendor prefixed styles
        autoprefixer: {
          options: {
            browsers: ['last 1 version']
          },
          dist: {
            files: [{
              expand: true,
              cwd: '.tmp/styles/',
              src: '{,*/}*.css',
              dest: '.tmp/styles/'
            }]
          }
        },
    
        // Automatically inject Bower components into the app
        wiredep: {
          options: {
            cwd: '<%= yeoman.app %>'
          },
          app: {
            src: ['<%= yeoman.app %>/index.html'],
            ignorePath:  /\.\.\//
          }
        },
    
        // Renames files for browser caching purposes
        filerev: {
          dist: {
            src: [
              '<%= yeoman.dist %>/scripts/{,*/}*.js',
              '<%= yeoman.dist %>/styles/{,*/}*.css',
              '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '<%= yeoman.dist %>/styles/fonts/*'
            ]
          }
        },
    
        // Reads HTML for usemin blocks to enable smart builds that automatically
        // concat, minify and revision files. Creates configurations in memory so
        // additional tasks can operate on them
        useminPrepare: {
          html: '<%= yeoman.app %>/index.html',
          options: {
            dest: '<%= yeoman.dist %>',
            flow: {
              html: {
                steps: {
                  js: ['concat', 'uglifyjs'],
                  css: ['cssmin']
                },
                post: {}
              }
            }
          }
        },
    
        // Performs rewrites based on filerev and the useminPrepare configuration
        usemin: {
          html: ['<%= yeoman.dist %>/{,*/}*.html'],
          css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
          options: {
            assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
          }
        },
    
        // The following *-min tasks will produce minified files in the dist folder
        // By default, your `index.html`'s <!-- Usemin block --> will take care of
        // minification. These next options are pre-configured if you do not wish
        // to use the Usemin blocks.
        // cssmin: {
        //   dist: {
        //     files: {
        //       '<%= yeoman.dist %>/styles/main.css': [
        //         '.tmp/styles/{,*/}*.css'
        //       ]
        //     }
        //   }
        // },
        // uglify: {
        //   dist: {
        //     files: {
        //       '<%= yeoman.dist %>/scripts/scripts.js': [
        //         '<%= yeoman.dist %>/scripts/scripts.js'
        //       ]
        //     }
        //   }
        // },
        // concat: {
        //   dist: {}
        // },
    
        imagemin: {
          dist: {
            files: [{
              expand: true,
              cwd: '<%= yeoman.app %>/images',
              src: '{,*/}*.{png,jpg,jpeg,gif}',
              dest: '<%= yeoman.dist %>/images'
            }]
          }
        },
    
        svgmin: {
          dist: {
            files: [{
              expand: true,
              cwd: '<%= yeoman.app %>/images',
              src: '{,*/}*.svg',
              dest: '<%= yeoman.dist %>/images'
            }]
          }
        },
    
        htmlmin: {
          dist: {
            options: {
              collapseWhitespace: true,
              conservativeCollapse: true,
              collapseBooleanAttributes: true,
              removeCommentsFromCDATA: true,
              removeOptionalTags: true
            },
            files: [{
              expand: true,
              cwd: '<%= yeoman.dist %>',
              src: ['*.html', 'views/{,*/}*.html'],
              dest: '<%= yeoman.dist %>'
            }]
          }
        },
    
        // ngmin tries to make the code safe for minification automatically by
        // using the Angular long form for dependency injection. It doesn't work on
        // things like resolve or inject so those have to be done manually.
        ngmin: {
          dist: {
            files: [{
              expand: true,
              cwd: '.tmp/concat/scripts',
              src: '*.js',
              dest: '.tmp/concat/scripts'
            }]
          }
        },
    
        // Replace Google CDN references
        cdnify: {
          dist: {
            html: ['<%= yeoman.dist %>/*.html']
          }
        },
    
        // Copies remaining files to places other tasks can use
        copy: {
          dist: {
            files: [{
              expand: true,
              dot: true,
              cwd: '<%= yeoman.app %>',
              dest: '<%= yeoman.dist %>',
              src: [
                '*.{ico,png,txt}',
                '.htaccess',
                '*.html',
                'views/{,*/}*.html',
                'images/{,*/}*.{webp}',
                'fonts/*'
              ]
            }, {
              expand: true,
              cwd: '.tmp/images',
              dest: '<%= yeoman.dist %>/images',
              src: ['generated/*']
            }, {
              expand: true,
              cwd: 'bower_components/bootstrap/dist',
              src: 'fonts/*',
              dest: '<%= yeoman.dist %>'
            }]
          },
          styles: {
            expand: true,
            cwd: '<%= yeoman.app %>/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
          }
        },
    
        // Run some tasks in parallel to speed up the build process
        concurrent: {
          server: [
            'copy:styles'
          ],
          test: [
            'copy:styles'
          ],
          dist: [
            'copy:styles',
            'imagemin',
            'svgmin'
          ]
        },
    
        // Test settings
        karma: {
          unit: {
            configFile: 'test/karma.conf.js',
            singleRun: true
          }
        }
      });
    
    
      grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
        if (target === 'dist') {
          return grunt.task.run(['build', 'connect:dist:keepalive']);
        }
    
        grunt.task.run([
          'clean:server',
          //'wiredep',
          'concurrent:server',
          'autoprefixer',
          'connect:livereload',
          'watch'
        ]);
      });
    
      grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) {
        grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
        grunt.task.run(['serve:' + target]);
      });
    
      grunt.registerTask('test', [
        'clean:server',
        'concurrent:test',
        'autoprefixer',
        'connect:test',
        'karma'
      ]);
    
      grunt.registerTask('build', [
        'clean:dist',
        //'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'ngmin',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        'htmlmin'
      ]);
    
      grunt.registerTask('default', [
        'newer:jshint',
        'test',
        'build'
    }
    
    1 回复  |  直到 10 年前
        1
  •  3
  •   Preview    10 年前

    基本上 wiredep 任务将在 bower.json 并将对它们的引用注入 index.html 基于 main 属性,并将其保存在 bower.json 具有 --save 选项

    的此功能 Yeoman 是非常有用的,因此您不必在每次向项目中添加或删除组件时复制脚本引用。

    实际上 Leaflet 阻止其工作的库 Bower 。它在 FAQ.md 。您也可以关注 this issue the other related ones .

    所以我建议你删除 传单 并手动添加主文件,以便 金属丝 任务不会干扰您的 索引html .

    推荐文章