前端构建 Less入门(CSS预处理器)(7)

'use strict' var lessBinDebugOpts = { sourceMap: true, sourceMapRootpath: '../../' }, debug = {env: 'debug'} module.exports = function(grunt){ grunt.initConfig({ clean: { options:{ force: true }, bin: ['bin'], dist: ['dist'] }, copy: { bin: { files: [ {expand: true, cwd: 'src/', src: '*.html', dest: 'bin/'} ] }, dist: { files:[ {expand: true, cwd: 'lib/', src: '**', dest: 'dist/lib/'}, {expand: true, cwd: 'src/', src: '*.html', dest: 'dist/app'} ] } }, less: { options:{ paths: 'lib/less', relativeUrls: true }, bin:{ options: (delete lessBinDebugOpts.modifyVars, lessBinDebugOpts), files: { 'bin/style/main.css': 'src/less/main.less' } }, debug:{ options: (lessBinDebugOpts.modifyVars = debug, lessBinDebugOpts), files: { 'bin/style/main.css': 'src/less/main.less' } }, dist:{ options:{ plugins: [new (require('less-plugin-clean-css'))({advanced: true})] }, files: { 'dist/app/style/main.css': 'src/less/main.less' } } } }) grunt.loadNpmTasks('grunt-contrib-less') grunt.loadNpmTasks('grunt-contrib-copy') grunt.loadNpmTasks('grunt-contrib-clean') var task = function(){ var name = this.name , tasks = ['clean', 'copy', 'less'] , targets = tasks.map(function(v, i, m){ var target = name === 'debug' && v !== 'less' ? 'bin' : name return v + ':' + target }) grunt.task.run(targets) } grunt.registerTask('bin', task) grunt.registerTask('debug', task) grunt.registerTask('dist', task) }

sample-grunt@github

十、总结                              

到这里我只能和大家说一声,“辛苦了各位,终于看完了耶!”。但正如标题所说,此刻无论是对less的使用,还是将其融入我们的开发工作流,我们均是入了个门而已。那应该如何进阶呢?那就是

;; 定义进阶过程 (defn becomeGeek [progress] (.log js/console "实践->总结->参考最佳实践") (if (> 100 progress) (becomeGeek (+ 1 progress)) )) ;; 努力吧骚年! (becomeGeek 1)

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwxjp.html