Grunt
Posted zhoulixue
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Grunt相关的知识,希望对你有一定的参考价值。
安装Grunt-cli:
cnpm install -g grunt-cli
新建项目文件夹,生成package.json:
cnpm init -y
安装 Grunt 和所需要的插件
- 合并文件:grunt-contrib-concat
- 语法检查:grunt-contrib-jshint
- Scss 编译:grunt-contrib-sass
- 压缩文件:grunt-contrib-uglify
- 监听文件变动:grunt-contrib-watch
- 建立本地服务器:grunt-contrib-connect
安装grunt:
cnpm instal grunt --save-dev
安装所需插件:
cnpm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
配置 Gruntfile.js 的语法
与 Grunt 有关的主要有三块代码:任务配置代码、插件加载代码、任务注册代码。
任务配置代码就是调用插件配置一下要执行的任务和实现的功能,插件加载代码就是把需要用到的插件加载进来,任务注册代码就是注册一个 task,里面包含刚在前面编写的任务配置代码。
任务配置代码
grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), uglify: { options: { banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘ }, build: { src: ‘src/<%= pkg.name %>.js‘, dest: ‘build/<%= pkg.name %>.min.js‘ } } });
插件加载代码
这个就超级简单了,由于上面任务需要用到 grunt-contrib-uglify,当 grunt-contrib-uglify 安装到我们的项目之后,写下下面代码即可加载:
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
任务注册代码
插件也加载了,任务也布置了,下面我们得注册一下任务,使用:
grunt.registerTask(‘default‘, [‘uglify‘]);
当你在项目目录执行 grunt 的时候,它会执行注册到 default 上面的任务。
也就是说,当我们执行 grunt 命令的时候,uglify 的所有代码将会执行。我们也可以注册别的 task,例如:
grunt.registerTask(‘compress‘, [‘uglify:build‘]);
如果想要执行这个 task,我们就不能只输入 grunt 命令了,我们需要输入 grunt compress
命令来执行这条 task,而这条 task 的任务是 uglify 下面的 build 任务,也就是说,我们只会执行 uglify 里面 build 定义的任务,而不会执行 uglify 里面定义的其他任务。
配置 Gruntfile.js
先从简单的入手,我们先来配置一下编译 Scss 文件的 task。先新建一个 Gruntfile.js 文件,把大体的配置结构复制进去:
module.exports = function(grunt) { var sassStyle = ‘expanded‘; grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), sass: { } }); grunt.loadNpmTasks(‘grunt-contrib-sass‘); grunt.registerTask(‘outputcss‘,[‘sass‘]); grunt.registerTask(‘default‘); };
最终结果:
module.exports = function(grunt) { var sassStyle = ‘expanded‘; grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json‘), sass: { output : { options: { style: sassStyle }, files: { ‘./style.css‘: ‘./scss/style.scss‘ } } }, concat: { options: { separator: ‘‘, }, dist: { src: [‘./src/plugin.js‘, ‘./src/plugin2.js‘], dest: ‘./global.js‘, }, }, uglify: { compressjs: { files: { ‘./global.min.js‘: [‘./global.js‘] } } }, jshint: { all: [‘./global.js‘] }, watch: { scripts: { files: [‘./src/plugin.js‘,‘./src/plugin2.js‘], tasks: [‘concat‘,‘jshint‘,‘uglify‘] }, sass: { files: [‘./scss/style.scss‘], tasks: [‘sass‘] }, livereload: { options: { livereload: ‘<%= connect.options.livereload %>‘ }, files: [ ‘index.html‘, ‘style.css‘, ‘js/global.min.js‘ ] } }, connect: { options: { port: 9000, open: true, livereload: 35729, // Change this to ‘0.0.0.0‘ to access the server from outside hostname: ‘localhost‘ }, server: { options: { port: 9001, base: ‘./‘ } } } }); grunt.loadNpmTasks(‘grunt-contrib-sass‘); grunt.loadNpmTasks(‘grunt-contrib-concat‘); grunt.loadNpmTasks(‘grunt-contrib-jshint‘); grunt.loadNpmTasks(‘grunt-contrib-uglify‘); grunt.loadNpmTasks(‘grunt-contrib-watch‘); grunt.loadNpmTasks(‘grunt-contrib-connect‘); grunt.registerTask(‘outputcss‘,[‘sass‘]); grunt.registerTask(‘concatjs‘,[‘concat‘]); grunt.registerTask(‘compressjs‘,[‘concat‘,‘jshint‘,‘uglify‘]); grunt.registerTask(‘watchit‘,[‘concat‘,‘jshint‘,‘uglify‘,‘connect‘,‘watch‘]); grunt.registerTask(‘default‘); };
以上是关于Grunt的主要内容,如果未能解决你的问题,请参考以下文章