对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
1.安装node.js并配置环境变量
2.在项目目录下新建package.json文件，以下是我正在用的，也可以使用node init命令自动生成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "name": "projectName", "title":"projectTitle", "keywords":"projectKeywords", "description":"projectDescription", "version": "0.0.1", "author": "www.ihtmlcss.com", "dependencies": { "grunt-contrib-html-build": "^0.5.6", "hammerjs": "^2.0.8" }, "devDependencies": { "animate.css": "^3.6.1", "bootstrap": "^3.3.7", "bootstrap-datetimepicker": "0.0.7", "bootstrap-lightbox": "^0.4.1", "bootstrap-select": "^1.13.1", "font-awesome": "^4.7.0", "grunt": "^1.0.3", "grunt-contrib-htmlmin": "^2.4.0", "grunt-contrib-imagemin": "^2.0.1", "grunt-contrib-less": "^2.0.0", "grunt-contrib-uglify-es": "^3.3.0", "grunt-contrib-watch": "^1.1.0", "jquery": "^3.3.1", "lazyload": "^2.0.0-beta.2", "scrollreveal": "^3.4.0" } } |
3.命令行进入package.json所在目录，执行npm install
4.新建Gruntfile.js配置grunt任务，下面是我正在用的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
module.exports = function(grunt) { //配置参数 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), fixturesPath: "src", uglify: { options: { esversion: 6, sourceMap:false, compress:true }, dev:{ files: { 'web/js/jquery.min.js':'node_modules/jquery/dist/jquery.js',// jquery 'web/js/hammer.min.js':'node_modules/hammerjs/hammer.js', 'web/js/all.min.js':[ 'src/js/layer.js', 'src/js/citypicker/city.json.js', 'src/js/citypicker/citySet.js', 'src/js/citypicker/Popt.js', 'node_modules/lazyload/lazyload.js', 'node_modules/scrollreveal/src/scrollreveal.js', 'node_modules/bootstrap/dist/js/bootstrap.js', //'node_modules/hammerjs/hammer.js', // 'node_modules/bootstrap-select/dist/js/bootstrap-select.js', // 'node_modules/bootstrap-select/dist/js/bootstrap-select.bundle.js', // 'node_modules/bootstrap-select/dist/js/i18n/defaults-zh_CN.js', 'src/js/main.js' ] } } }, less: { options: { sourceMap:false, compress:true }, dev:{ files: { 'web/css/all.min.css':[ "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap-theme.css", "node_modules/font-awesome/less/font-awesome.less", "node_modules/animate.css/animate.css", //"node_modules/bootstrap-select/dist/css/bootstrap-select.css", "src/less/main.less" ], 'web/css/page/lady.min.css':'src/less/page/lady.less', 'web/css/page/prince.min.css':'src/less/page/prince.less', 'web/css/page/princess.min.css':'src/less/page/princess.less', 'web/css/page/gentleman.min.css':'src/less/page/gentleman.less', 'web/css/page/branchCampus.min.css':'src/less/page/branchCampus.less', 'web/css/page/brand.min.css':'src/less/page/brand.less', 'web/css/page/teachersCollege.min.css':'src/less/page/teachersCollege.less', 'web/css/page/management.min.css':'src/less/page/management.less', // join.html 'web/css/page/join/join.min.css':[ 'src/less/page/join/join.less', "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap-theme.css", "node_modules/font-awesome/less/font-awesome.less", "node_modules/animate.css/animate.css" ], 'web/css/page/join/join_m.min.css':[ 'src/less/page/join/join_m.less', "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/bootstrap/dist/css/bootstrap-theme.css", "node_modules/font-awesome/less/font-awesome.less", "node_modules/animate.css/animate.css" ] } } }, imagemin:{ dev:{ options:{ optimizationLevel:1 }, files:[ { expand:true, cwd:'src/images/', src:'**/*.{png,jpg,jpeg,svg,gif}', dest:'web/images/' } ] } }, htmlbuild:{ dev:{ src:[ 'src/templates/*.ftl', 'src/templates/pages/*.ftl' ], dest:'web', options:{ beautify: true, relative: true, basePath: false, data:{ baseUrl:'http://www.minakevin.com' }, scripts: { }, styles: { main: '<%= fixturesPath %>/css/all.min.css' }, sections: { views: '<%= fixturesPath %>/templates/**/*.ftl', templates: '<%= fixturesPath %>/templates/**/*.ftl', layout: { meta:'<%= fixturesPath %>/templates/layout/meta.ftl', header: '<%= fixturesPath %>/templates/layout/header.ftl', footer: '<%= fixturesPath %>/templates/layout/footer.ftl', asideMenu: '<%= fixturesPath %>/templates/layout/module/asideMenu.ftl', footForm: '<%= fixturesPath %>/templates/layout/module/footForm.ftl', sideBarJoinUs: '<%= fixturesPath %>/templates/layout/module/sidebar-joinus.ftl', banner: '<%= fixturesPath %>/templates/layout/module/banner.ftl', position: '<%= fixturesPath %>/templates/layout/module/position.ftl', sidebar:{ joinus:'<%= fixturesPath %>/templates/layout/module/sidebar-joinus.ftl', list_1:'<%= fixturesPath %>/templates/layout/module/sidebar-list-1.ftl', list_2:'<%= fixturesPath %>/templates/layout/module/sidebar-list-3.ftl', list_3:'<%= fixturesPath %>/templates/layout/module/sidebar-list-2.ftl' }, sidebar2:{ joinus:'<%= fixturesPath %>/templates/layout/module/sidebar-joinus.ftl', list_1:'<%= fixturesPath %>/templates/layout/module/sidebar-list-1.ftl', list_2:'<%= fixturesPath %>/templates/layout/module/sidebar-list-3.ftl', list_3:'<%= fixturesPath %>/templates/layout/module/sidebar-list-2.ftl' } } } } } }, // 监控 watch: { scripts: { files: 'src/js/*.js', tasks: ['uglify:dev'], options: { debounceDelay: 200 } }, less: { files: "src/less/**/*.less", tasks: ['less:dev'], options: { debounceDelay: 200 } }, imagemin:{ files:'src/images/**/*.{png,jpg,jpeg,svg}', tasks:['imagemin:dev'], options:{ debounceDelay: 200 } }, html:{ files:'src/templates/**/*.{html,htm,ftl}', tasks:['htmlbuild:dev'], options:{ debounceDelay: 200 } } } }); // grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify-es'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-html-build'); // //注册任务 grunt.registerTask('build', [ 'less:dev','uglify:dev','htmlbuild:dev'],'imagemin:dev'); grunt.registerTask('js',['uglify:dev']); grunt.registerTask('css',['less:dev']); grunt.registerTask('img',['imagemin:dev']); grunt.registerTask('html',['htmlbuild:dev']); } |
文章评论 暂无评论
暂无评论