Grunt 配置文件

来源：互联网发布：snmp 网络拓扑编辑：程序博客网时间：2024/06/03 15:01

☆ 安装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']);};

阅读全文

0 0