标签:
作为前端开发人员,有必要也有义务掌握前端自动化工具grunt;
这样可以极大地降低前端的复杂工作,提高工作效率,把所有的精力都投入到
编码中去。
grunt API列表
在使用grunt构建前端自动化中,我主要使用的config、file、template以及util这几个API。
现在贴一份gruntfilejs代码,基本上前端的自动化工作都可以完成:
‘use strict‘ var ASSETS_DIR = ‘assets/‘; module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), /* jsdoc生成js文档 */ jsdoc: { dist: { src: [‘assets/scripts/test.js‘], options: { destination: ‘docs‘ } } }, /* css代码合并 */ concat: { } }); /*grunt-contrib-less模块,使用less预编译css文件*/ grunt.config.merge({ less: { dev: { files: [{ expand: true, cwd: ASSETS_DIR + ‘less/‘ + ‘./‘, src: [‘*.less‘], dest: ASSETS_DIR + ‘css‘, ext: ‘.css‘ }] }, bootstrap: { files: { ‘assets/css/bootstrap.css‘: ‘assets/less/bootstrap/bootstrap.less‘ } } } }); /*grunt-contrib-sprite模块,生成雪碧图*/ grunt.config.merge({ sprite: { options: { banner: ‘/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/‘ }, all: { src: [ASSETS_DIR + "images/sprites/*.png"], engine: require(‘pixelsmith‘), dest: ASSETS_DIR + "images/sprite.png", destCss: ASSETS_DIR + "css/sprite.css", padding: 10, algorithm: "binary-tree", cssVarMap: function(sprite) { var iconIndex, activeIndex; iconIndex = sprite.name.indexOf(‘icon-‘); activeIndex = sprite.name.lastIndexOf(‘-active‘); if (activeIndex > 0) { // sprite.name=sprite.name.replace(sprite.name.substr(activeIndex),":active"); } if (iconIndex === 0) { sprite.name = sprite.name.replace(sprite.name.substr(0, 5), ‘‘); } } } } }); /*grunt-contrib-cssmin模块,压缩css文件*/ grunt.config.merge({ cssmin: { add_banner: { options: { banner: ‘/* minify the css file <%= grunt.template.today("yyyy-mm-dd") %> */‘ }, files: { ‘assets/css/output.css‘: [ASSETS_DIR + ‘css/bootstrap.css‘, ASSETS_DIR + ‘css/home.css‘] } }, minify: { options: { banner: ‘/* minify the css file\n Author:lidasong\n Time: <%= grunt.template.today("yyyy-mm-dd") %>*/‘ }, expand: true, cwd: ASSETS_DIR + ‘dest/css/‘, src: [‘*.css‘, ‘!*.min.css‘], dest: ASSETS_DIR + ‘dest/release‘, ext: ‘.min.css‘ } } }); /**js、css代码检测工具, *grunt-contrib-jshint模块、grunt-contrib-csslint模块 **/ grunt.config.merge({ jshint: { all: { options: { ‘-W069‘: true, ‘-W064‘: true, ‘-W040‘: true }, src: [‘assets/scripts/*.js‘, ‘assets/scripts/module/*.js‘, ‘assets/scripts/util/*.js‘] } }, csslint: { strict: { options: { import: false }, src: [ASSETS_DIR + ‘css/*.css‘] } } }); /*grunt-contrib-uglify模块,压缩js文件*/ grunt.config.merge({ uglify: { jscomp: { files: [{ expand: true, cwd: ASSETS_DIR + ‘scripts‘, src: ‘**/*.js‘, dest: ASSETS_DIR + ‘dest/scripts‘ }] } }, }); /*grunt-contrib-copy模块,文件复制*/ grunt.config.merge({ copy: { release: { options: { process: function(content, srcpath) {}, timestamp: true }, expand: true, cwd: ASSETS_DIR + ‘dest/‘, src: [‘**‘], dest: ASSETS_DIR + ‘release‘ // flatten:true, // filter:‘isFile‘ } } }); /*grunt-contrib-clean模块,清除文件*/ grunt.config.merge({ clean: { concatCss: { options: { force: true }, src: [ASSETS_DIR + ‘dest/css/‘] }, miniCss: { options: { force: true }, src: [ASSETS_DIR + ‘dest/release/‘] } } }); /*grunt-contrib-watch模块,监控文件变化*/ grunt.config.merge({ watch: { ‘less-dev‘: { files: [ASSETS_DIR + ‘less/*.less‘, ASSETS_DIR + ‘less/partials/**/*.less‘], tasks: [‘less:dev‘] }, ‘less-bootstrap‘: { files: [ASSETS_DIR + ‘less/lib/bootstrap/**/*.less‘], tasks: [‘less:bootstrap‘] } } }); /*grunt-contrib-*模块加载*/ require(‘load-grunt-tasks‘)(grunt); /*grunt注册任务列表*/ grunt.registerTask(‘default‘, [‘less:dev‘, ‘watch:less-dev‘]); grunt.registerTask(‘bootstrap‘, [‘less:bootstrap‘]); grunt.registerTask(‘js-hint‘, ‘JS代码质量检查‘, [‘jshint‘]); grunt.registerTask(‘css-lint‘, ‘CSS代码质量检查‘, [‘csslint‘]); grunt.registerTask(‘all-concat‘, ‘css 代码合并‘, [‘clean:concatCss‘, ‘css-concat‘, ‘concat‘]); grunt.registerTask(‘minify-css‘, ‘CSS代码压缩‘, [‘clean:miniCss‘, ‘cssmin:minify‘]); grunt.registerTask(‘doc‘, ‘jsdoc生成js文档‘, [‘jsdoc‘]); grunt.registerTask(‘sprites‘, ‘生成雪碧图‘, [‘sprite:all‘]); grunt.registerTask(‘js-comp‘, ‘压缩js代码‘, [‘uglify:jscomp‘]); grunt.registerTask(‘copyCss‘, ‘复制合并压缩后的css‘, [‘copy:release‘]); grunt.registerTask(‘css-concat‘, ‘css代码合并‘, function() { grunt.file.expand(ASSETS_DIR + ‘css/*‘).forEach(function(dir) { var dirName = dir.substr(0, dir.indexOf(‘.‘)), concat = grunt.config.get(‘concat‘) || {}; dirName = dirName.substr(dirName.lastIndexOf(‘/‘) + 1); if (grunt.file.isFile(dir)&&dirName !== ‘bootstrap‘ && dirName !== ‘sprite‘) { concat[‘options‘] = { stripBanners: true, banner: ‘/*合并css后的代码*/‘ }; concat[dirName] = { src: [dir, ASSETS_DIR + ‘css/bootstrap.css‘], dest: ASSETS_DIR + ‘dest/css/‘ + dirName + ‘.css‘ }; grunt.config.set(‘concat‘, concat); } }); }); };
标签:
原文地址:http://www.cnblogs.com/lds2014/p/4549762.html