☆ 安装Grunt 及 插件
npm install grunt grunt-contrib-concat grunt-contrib-connect grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch connect-livereload --save-dev
☆ Gruntfile.js
module.exports = function(grunt) { var sassStyle = 'expanded'; //任务配置代码 grunt.initConfig({ //读取package.json文件,获取json信息,方便在任务中应用。 pkg: grunt.file.readJSON('package.json'), //sass/concat/uglify/watch/connect 名字是固定的,表示调用该插件。 // 具体options里的参数和dist任务中的参数,需要查看每个插件的用法,根据用法来编写任务。 //编译scss文件 sass: { output: { options: { style: sassStyle }, files: { './css/index.css': './sass/index.scss' } } }, //合并 concat: { dist: { files: { 'build/<%= pkg.name %>.js': '<%= pkg.main %>', } } }, //压缩 uglify: { options: { banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> <%= pkg.author %> */\n' }, dist: { files: { 'build/libs.min.js':'<%= pkg.libs %>', 'build/<%= pkg.name %>.min.js':['build/<%= pkg.name %>.js'], } } }, //监听文件变化,自动执行某些任务 watch: { sass: { files: ['./sass/index.scss'], tasks: ['sass'] }, livereload: { options: { livereload: '<%= connect.options.livereload %>' }, files: ['css/index.css'] } }, //创建本地服务器,以当前目录为服务器根目录 connect: { options: { port: 9000, open: true, livereload: 35729, hostname: 'localhost' }, server: { options: { port: 9001, base: './' } } } }); //插件加载代码 grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); //任务注册代码 //需要注意:task的命名不能与后面的任务配置同名,也就是outputcss 不能命名为 sass,否则会报错。 grunt.registerTask('outputcss', ['sass']); grunt.registerTask('watching', ['sass', 'connect', 'watch']); grunt.registerTask('default', ['concat', 'uglify']); };