• home > tools > Bundler > grunt >

    grunt-sass解决sass编译问题

    Author:zhoulujun@live.cn Date:

    ruby的镜像被邪恶的GC* 你懂的干掉……你在天朝,就……第二个,是因为,对于大多数前端的同学,又是nodejs,又是ruby的,烦不烦啊……人

    ruby的镜像被邪恶的GC* 你懂的干掉……你在天朝,就……

    第二个,是因为,对于大多数前端的同学,又是nodejs,又是ruby的,烦不烦啊……

    人家就是写写div,做下js……

    所以,就配置好一体化环境……越简单,越好啦……

    所以,现在我们的平台推进用node-sass……

    //initConfig 地下
    sass: {
      options: {
        sourceMap: true
      },
      dist: {
        files: [{
          expand:true,
          cwd: '/styles',
                src: ['*.scss'],
                dest:  '/styles',
                ext: '.css'
        }]
      }
    },
    
    //watch 底下……
    
    sass: {
      files: ['/styles/**/*.scss'],
      tasks: ['sass']
    },

    blob.png



    blob.png

    最后

    blob.png

    //全部配置文件
    // Generated on 2015-12-02 using generator-angular 0.12.1
    'use strict';
    
    // # Globbing
    // for performance reasons we're only matching one level down:
    // 'test/spec/{,*/}*.js'
    // use this if you want to recursively match all subfolders:
    // 'test/spec/**/*.js'
    
    module.exports = function (grunt) {
    
      // Time how long tasks take. Can help when optimizing build times
      require('time-grunt')(grunt);
    
      // Automatically load required Grunt tasks
      require('jit-grunt')(grunt, {
        useminPrepare: 'grunt-usemin',
        ngtemplates: 'grunt-angular-templates',
        cdnify: 'grunt-google-cdn'
      });
    
      // 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,
        sass: {
          options: {
            sourceMap: true
          },
          dist: {
            files: [{
              expand:true,
              cwd: '/styles',
                    src: ['*.scss'],
                    dest:  '/styles',
                    ext: '.css'
            }]
          }
        },
        //sass: {
        //  dist: {
        //    files: [{
        //      expand: true,
        //      cwd: '/styles',
        //      src: ['*.scss'],
        //      dest:  '/styles',
        //      ext: '.css'
        //    }]
        //  }
        //},
        // Watches files for changes and runs tasks based on the changed files
        watch: {
          bower: {
            files: ['bower.json'],
            tasks: ['wiredep']
          },
          js: {
            files: ['/scripts/**/*.js'],
            tasks: ['newer:jshint:all'],
            options: {
              livereload: ''
            }
          },
          jsTest: {
            files: ['test/spec/{,*/}*.js'],
            tasks: ['newer:jshint:test', 'karma']
          },
          sass: {
            files: ['/styles/**/*.scss'],
            tasks: ['sass']
          },
          //css: {
          //  //files: '**/*.scss',
          //  files: ['/styles/**/*.scss'],
          //  tasks: ['sass'],
          //  //sourceComments: 'normal'
          //},
          styles: {
            files: ['/styles/{,*/}*.css'],
            tasks: ['newer:copy:styles', 'autoprefixer']
          },
          gruntfile: {
            files: ['Gruntfile.js']
          },
          livereload: {
            options: {
              livereload: ''
            },
            files: [
              '/**/*.html',
              '.tmp/styles/{,*/}*.css',
              '/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
          }
        },
    
        // The actual grunt server settings
        connect: {
          options: {
            port: 9003,
            // Change this to '0.0.0.0' to access the server from outside.
            hostname: 'localhost',
            livereload: 35749
          },
          proxies: [
            {
              context: '/jsse/SL_PEM', // the context of the data service
              host: '192.168.0.49', // wherever the data service is running
              port: 9999, // the port that the data service is running on
              changeOrigin: true, // 建议配置为true,这样它转发时就会把host带过去,比如www.ngnice.com,如果远端服务器使用了虚拟主机的方式配置,该选项通常是必须的。
            },
            {
              context: '/jsse/orderManager/payPremiumForProposal', // the context of the data service
              host: '192.168.0.58', // wherever the data service is running
              port: 20010 // the port that the data service is running on
            },
            {
              context: '/jsse', // the context of the data service
              host: 'localhost', // wherever the data service is running
              port: 8080, // the port that the data service is running on
              rewrite: {
                '/jsse/SL_PEM' : '/jsse/SL_PEM', // 地址映射策略,从context开始算,把前后地址做正则替换,如果远端路径和context相同则不用配置。
                '/jsse/orderManager/payPremiumForProposal' : '/jsse/orderManager/payPremiumForProposal',
              }
              //This rewrite rule tells the proxy that ever call which starts with user gets redirected to the user context we defined earlier. It won't work the other way round, since the context has to be defined beforehand, but that shouldn't matter actually. Feel free to include as many proxies and rewrites. Using this structure everything should work fine.
            },
            {
              context: '/miResourceMgr', // the context of the data service
              host: '113.108.40.12', // wherever the data service is running
              port: 12010 // the port that the data service is running on
            },
    
          ],
          livereload: {
            options: {
              open: true,
              middleware: function (connect) {
                return [
                  connect.static('.tmp'),
                  connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                  ),
                  connect().use(
                    '/app/styles',
                    connect.static('./app/styles')
                  ),
                  connect.static(appConfig.app),
                  require('grunt-connect-proxy/lib/utils').proxyRequest
    
                ];
              }
            }
          },
          test: {
            options: {
              port: 9047,
              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: ''
            }
          }
        },
    
        // 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',
              '/scripts/{,*/}*.js'
            ]
          },
          test: {
            options: {
              jshintrc: 'test/.jshintrc'
            },
            src: ['test/spec/{,*/}*.js']
          }
        },
    
        // Empties folders to start fresh
        clean: {
          dist: {
            files: [{
              dot: true,
              src: [
                '.tmp',
                '/{,*/}*',
                '!/.git{,*/}*'
              ]
            }]
          },
          server: '.tmp'
        },
    
        // Add vendor prefixed styles
        autoprefixer: {
          options: {
            browsers: ['last 1 version']
          },
          server: {
            options: {
              map: true,
            },
            files: [{
              expand: true,
              cwd: '.tmp/styles/',
              src: '{,*/}*.css',
              dest: '.tmp/styles/'
            }]
          },
          dist: {
            files: [{
              expand: true,
              cwd: '.tmp/styles/',
              src: '{,*/}*.css',
              dest: '.tmp/styles/'
            }]
          }
        },
    
        // Automatically inject Bower components into the app
        wiredep: {
          app: {
            src: ['/index.html'],
            ignorePath:  /\.\.\//
          },
          test: {
            devDependencies: true,
            src: '',
            ignorePath:  /\.\.\//,
            fileTypes:{
              js: {
                block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
                  detect: {
                    js: /'(.*\.js)'/gi
                  },
                  replace: {
                    js: '\'{{filePath}}\','
                  }
                }
              }
          }
        },
    
        // Renames files for browser caching purposes
        filerev: {
          dist: {
            src: [
              '/scripts/{,*/}*.js',
              '/styles/{,*/}*.css',
              '/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '/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: '/index.html',
          options: {
            dest: '',
            flow: {
              html: {
                steps: {
                  js: ['concat', 'uglifyjs'],
                  css: ['cssmin']
                },
                post: {}
              }
            }
          }
        },
    
        // Performs rewrites based on filerev and the useminPrepare configuration
        usemin: {
          html: ['/{,*/}*.html'],
          css: ['/styles/{,*/}*.css'],
          js: ['/scripts/{,*/}*.js'],
          options: {
            assetsDirs: [
              '',
              '/images',
              '/styles'
            ],
            patterns: {
              js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
            }
          }
        },
    
        // The following *-min tasks will produce minified files in the dist folder
        // By default, your `index.html`'s  will take care of
        // minification. These next options are pre-configured if you do not wish
        // to use the Usemin blocks.
        // cssmin: {
        //   dist: {
        //     files: {
        //       '/styles/main.css': [
        //         '.tmp/styles/{,*/}*.css'
        //       ]
        //     }
        //   }
        // },
        // uglify: {
        //   dist: {
        //     files: {
        //       '/scripts/scripts.js': [
        //         '/scripts/scripts.js'
        //       ]
        //     }
        //   }
        // },
        // concat: {
        //   dist: {}
        // },
    
        imagemin: {
          dist: {
            files: [{
              expand: true,
              cwd: '/images',
              src: '{,*/}*.{png,jpg,jpeg,gif}',
              dest: '/images'
            }]
          }
        },
    
        svgmin: {
          dist: {
            files: [{
              expand: true,
              cwd: '/images',
              src: '{,*/}*.svg',
              dest: '/images'
            }]
          }
        },
    
        htmlmin: {
          dist: {
            options: {
              collapseWhitespace: true,
              conservativeCollapse: true,
              collapseBooleanAttributes: true,
              removeCommentsFromCDATA: true
            },
            files: [{
              expand: true,
              cwd: '',
              src: ['*.html'],
              dest: ''
            }]
          }
        },
    
        ngtemplates: {
          dist: {
            options: {
              module: 'clientApp',
              htmlmin: '',
              usemin: 'scripts/scripts.js'
            },
            cwd: '',
            src: 'views/{,*/}*.html',
            dest: '.tmp/templateCache.js'
          }
        },
    
        // ng-annotate tries to make the code safe for minification automatically
        // by using the Angular long form for dependency injection.
        ngAnnotate: {
          dist: {
            files: [{
              expand: true,
              cwd: '.tmp/concat/scripts',
              src: '*.js',
              dest: '.tmp/concat/scripts'
            }]
          }
        },
    
        // Replace Google CDN references
        cdnify: {
          dist: {
            html: ['/*.html']
          }
        },
    
        // Copies remaining files to places other tasks can use
        copy: {
          dist: {
            files: [{
              expand: true,
              dot: true,
              cwd: '',
              dest: '',
              src: [
                '*.{ico,png,txt}',
                '.htaccess',
                '*.html',
                'images/{,*/}*.{webp}',
                'styles/fonts/{,*/}*.*'
              ]
            }, {
              expand: true,
              cwd: '.tmp/images',
              dest: '/images',
              src: ['generated/*']
            }, {
              expand: true,
              cwd: 'bower_components/bootstrap/dist',
              src: 'fonts/*',
              dest: ''
            }]
          },
          styles: {
            expand: true,
            cwd: '/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.loadNpmTasks('grunt-contrib-sass');
      //grunt.registerTask('default', ['sass']);
      grunt.loadNpmTasks('grunt-sass');
      grunt.loadNpmTasks('grunt-connect-proxy');
      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:server',
          'configureProxies:server',
          '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',
        'wiredep',
        'concurrent:test',
        'autoprefixer',
        'connect:test',
        'karma'
      ]);
    
      grunt.registerTask('build', [
        'clean:dist',
        'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'ngtemplates',
        'concat',
        'ngAnnotate',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'sass',
        'usemin',
        'htmlmin'
      ]);
    
      grunt.registerTask('default', [
        'newer:jshint',
        'test',
        'build'
      ]);
    };



    转载本站文章《grunt-sass解决sass编译问题》,
    请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/grunt/2016_0331_7731.html