grunt的使用

使用grunt来压缩js代码，这可是前台开发必须的利器啊。
第一步 安装grunt-cli，该文件安装到全局的：

cnpm install -g grunt-cli

第二步安装grunt以及相关的插件

cnpm install grunt --save-dev

安装相关插件

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

第三步：在跟目录下添加Gruntfile.js

文件的目录结构如下：

Gruntfile.js文件内容如下：

module.exports = function(grunt) {
var sassStyle = 'expanded';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: '',
},
dist: {
src: ['./src/goingUtils.js'],
dest: './goingUtils.js'
},
},
uglify: {
compressjs: {
files: {
'./goingUtils.min.js': ['./goingUtils.js']
}
}
},
jshint: {
all: ['./goingUtils.js']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('outputcss',['sass']);
grunt.registerTask('concatjs',['concat']);
grunt.registerTask('compressjs',['concat','jshint','uglify']);
grunt.registerTask('default');
};

里面的细节就不讲解咯，我刚开始执行是报错误的,缺少了相关的依赖，我把下面的命令执行了一遍就ok了

cnpm install grunt-karma karma karma-phantomjs-launcher karma-jasmine jasmine-core phantomjs-prebuilt --save-dev

执行该命令来进行压缩、代码检查操作

grunt compressjs

压缩的效果：

网上找了个比较全的grunt.js文件内容，供后期查看：

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: {
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',['sass','concat','jshint','uglify','connect','watch']);
grunt.registerTask('default');
};

最后

以上就是忧郁百合为你收集整理的grunt的使用的全部内容，希望文章能够帮你解决grunt的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。