grunt + sass 使用记录

环境依赖

  • Nodejs for grunt
  • Ruby for sass

配置文件

package.json

{

  "name": "app",

  "version": "1.0.0",

  "devDependencies": {

    "grunt": "^0.4.5",

    "grunt-contrib-watch": "^0.6.1",

    "grunt-contrib-sass": "^0.8.1",

    "grunt-contrib-jshint": "^0.10.0",

    "grunt-contrib-concat": "^0.5.0",

    "grunt-contrib-cssmin": "^0.10.0",

    "grunt-contrib-uglify": "^0.6.0",

    "grunt-contrib-htmlmin": "^0.3.0",

    "grunt-contrib-imagemin": "^0.9.2"

  }

}

 

Gruntfile.js

module.exports = function (grunt) {



    // grunt config

    grunt.initConfig({

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



        sass: {

            options: {

                style: 'expanded'

            },

            scss: {

                files: [{

                    src: 'src/css/main.scss',

                    dest: 'src/css/main.css'

                }]

            }

        },



        jshint: {            

            files: ['gruntfile.js', 'src/js/*.js']

        },



        concat: {

            options: {

                banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',

                separator: '\n/*---------分割线---------*/\n'

            },

            js: {

                files: [{

                    src: ['src/js/base.js', 'src/js/script.js'],

                    dest: 'dist/js/<%= pkg.name %>.js'

                }]

            }

        },



        cssmin: {

            css: {

                files: [{

                    src: 'src/css/main.css',

                    dest: 'dist/css/<%= pkg.name %>.min.css'

                }]

            }

        },



        uglify: {

            js: {

                files: [{

                    src: 'dist/js/<%= pkg.name %>.js',

                    dest: 'dist/js/<%= pkg.name %>.min.js'

                }]

            }

        },



        htmlmin: {

            options: {

                removeComments:true,

                collapseWhitespace:true

            },

            dist: {

                files: [{

                    expand: true,       // all html

                    cwd: 'src/',

                    src: ['**/*.html'],

                    dest: 'dist/'

                }]

            }

        },



        imagemin: {

            img: {

                files: [{

                    expand: true,        // all images

                    cwd: 'src/',

                    src: ['**/*.{png,jpg,gif}'],

                    dest: 'dist/'

                }]

            }

        },



        watch: {

            css: {

                files: 'src/css/main.scss',

                tasks: ['sass']

            },

            js: {

                files: ['<%= jshint.files %>'],

                tasks: ['jshint']

            }

        }

    });



    // load task

    grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.loadNpmTasks('grunt-contrib-htmlmin');

    grunt.loadNpmTasks('grunt-contrib-imagemin');

    grunt.loadNpmTasks('grunt-contrib-watch');



    // regist task

    grunt.registerTask('compile', ['watch']);

    grunt.registerTask('default', ['sass', 'jshint', 'concat', 'cssmin', 'uglify']);

    grunt.registerTask('html', ['htmlmin']);

    grunt.registerTask('img', ['imagemin']);

};

 

参考资源:

你可能感兴趣的:(grunt)