grunt
npm install -g grunt-cli //全局安装grunt npm init -y //初始化package.json npm install grunt --save-dev //在项目中安装grunt grunt --help //查看更多信息 grunt 安装完毕
新建Gruntfile.js 随便举得例子1：
module.exports= function (grunt) {
grunt.registerTask('default', function () {
console.log('aaaaaaaa');
//grunt.log.writeln('aaaaaaaa');
//函数中可以传递参数
})
};随便举的例子2: 执行多任务
module.exports= function (grunt) {
grunt.registerTask('a', function (name) {
grunt.log.writeln('hello'+name);
});
grunt.registerTask('b', function () {
grunt.log.writeln('hello2')
});
grunt.registerTask('c', function () {
grunt.log.writeln('hello3')
});
grunt.registerTask('default',['a','b','c']);
};我们可以初始化一些数据，这些数据可以用到不同的任务里面
module.exports= function (grunt) {
grunt.initConfig({
a:{
english:'hello'
}
});
grunt.registerTask('a', function (name) {
grunt.log.writeln(grunt.config.get('a.english'));
});
};多个任务执行
module.exports= function (grunt) {
grunt.initConfig({
a:{
english:'hello',
spanlish:'hello2'
}
});
grunt.registerMultiTask('a', function (name) {
grunt.log.writeln(this.target+':'+this.data);
});
};以下是插件的一部分功能 复制文件 npm install grunt-contrib-copy --save-dev
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy:{
html:{
src:'index.html',
dest:'dist/'
}
}
});监听文件 npm install grunt-contrib-watch --save-dev
grunt.loadNpmTasks('grunt-contrib-watch');
watch:{
html:{
files:['index.html'],
tasks:['copy:html']
}
}放到服务器上 npm install grunt-contrib-connect --save-dev
connect:{
server:{
port:8080,
base:'dist/'
}
}grunt connect:server:keepalive一直保持状态
自动刷新浏览器 npm install grunt-contrib-livereload --save-dev 在connect中添加：livereload:true 在watch中添加：livereload:true
编译sass npm install grunt-contrib-sass --save-dev
sass:{
mysass:{
src:'css/a.scss',
dest:'dist/scss/a.css'
}
}编译less npm install grunt-contrib-less --save-dev
less:{
myless:{
src:'css/b.less',
dest:'dist/less/b.css'
}
}npm install grunt-contrib-concat --save-dev //安装合并插件npm install grunt-contrib-uglify --save-dev //安装js压缩插件js压缩合并
concat:{
myconcat:{
src:'js/*.js',
dest:'dist/hebing/a.hebing.js'
}
},
uglify:{
myuglify:{
src:'dist/hebing/a.hebing.js',
dest:'dist/yasuohebing/b.min.js'
}
}npm install grunt-contrib-cssmin --save-dev//安装css压缩npm install grunt-contrib-htmlmin --save-dev//安装html压缩
htmlmin:{
options:{
removeComments: true,
removeCommentsFromCDATA: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true
},
myminhtml:{
src:'index.html',
dest:'dist/html/'
}
}npm install grunt-contrib-imagemin --save-dev//优化img
imagemin:{
myimage:{
expand:true,
src:'img/*',
dest:'dist/'
}
}文件头部加一段注释性语言配置banner信息
options: { banner: '/*! 注释信息 */' }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.03.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读