Grunt/Gulp 都是node.js下的模块，简单来说是自动化任务运行器，两者都有社区及大量的插件支撑，在所有的自动化工具领域里，这两者是最好的前端自动化构建工具。
Grunt和所有grunt插件都是基于nodejs来运行的，如果你的电脑上没有nodejs，就去安装吧。安装nodejs非常简单，完全傻瓜式、下一步下一步下一步、的安装方式，这里不再赘述。去 https://nodejs.org/ 上，点击页面中那个绿色、大大的“install”按钮即可。
安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。
【grunt】前端自动化工具
官网：gruntjs.com
前提：基于nodejs
验证环境 node -v
npm -v node的一个包管理器
新的node版本自带npm，老的不带
使用流程
1、安装grunt命令环境（想要用指令运行grunt必须装）
npm install grunt-cli -g
-cli创建命令行 -g全局
2、验证是否安装
grunt --version
以上证明 grunt命令环境已经装好
3、进入本地文件 cd 文件名/文件名
grunt需要两个文件：
package.json 项目的配置文件
配置整个项目情况，项目的名称，项目的版本，项目的作者，项目依赖的模块（插件）
Gruntfile.js 配置grunt 设置插件的使用
4、npm init
创建出package.json
name 项目名称（千万别用grunt）
5、安装本地grunt
npm install grunt --save-dev
6、需要准备文件
Gruntfile.js 编写任务
7、编写具体任务
module.exports=function(grunt){
console.log('111')
}
保存模块的三种方法
a)npm install 模块名
把此模块，安装到本项目目录中
b)npm install 模块名 --save
不仅会把模块安装到本目录，会写入package.json文件中，写到dependencies选项中
c)npm install 模块名 --save-dev 推荐的
不仅会把模块安装到本目录，会写入package.json文件中，写到devDependencies选项中
常用插件下载：
插件： http://gruntjs.com/plugins
关于grunt插件的分类：
1、grunt团队自己开发的contrib
2、第三方编写的
grunt常用插件：
grunt-contrib-watch 监听变化
grunt-contrib-uglify 压缩js
grunt-contrib-cssmin 压缩css
grunt-contrib-htmlmin 压缩html
grunt-contrib-imagemin 压缩图片
比较常用的
grunt-contrib-concat 合并文件
grunt-contrib-clean 删除文件以及文件夹
grunt-contrib-cope 复制东西
grunt-contrib-jshint 检测js代码语法
grunt-contrib-less 编译less文件
下载插件(在命令行中)
npm install grunt-contrib-less --save-dev
编写流程：
module.exports=function(grunt){
//1.导入模块
grunt.loadNpmTasks('grunt-contrib-uglify');
//2配置具体任务
grunt.initConfig({
主任务:{ //主任务名和模块名一样（uglify）
a:{ //子任务名随便
src:'XXX', //源文件
dest:'XXX' // 目标文件
}
}
});
//3注册一个默认任务
grunt.registerTask('default',['uglify','htmlmin']);
}
运行：
grunt 主任务名
grunt 主任务名:次任务名
grunt
一般项目中别人不会把下载好的给你，只会把配置文件给你，
只给项目和Gruntfile.js,package.json
1、npm install 下载package.json中devDependencies里的所有依赖模块
2、grunt
grunt:目录名称不能用括号
整体编写步骤：Gruntfile.js
module.exports=function(grunt){
//1.导入模块
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
//2配置具体任务
grunt.initConfig({
uglify:{
a:{
src:'src2/js/*.js',
dest:'build/js/main.js'
}
},
cssmin:{
a:{
src:'src2/css/*.css',
dest:'build/css/main.css'
}
},
htmlmin:{
options:{
removeComments:true,
collapseWhitespace:true
},
a:{
src:'src2/new.html',
dest:'build/new.html'
}
},
imagemin:{
a:{
expand:true,
cwd:'src2/img',
src:'*.gif',
dest:'build/img'
}
},
watch:{
a:{
files:['src2/new.html','src2/css/*.css'],
tasks:['htmlmin','cssmin']
}
}
});
//3注册一个默认任务
grunt.registerTask('default',['uglify','cssmin','htmlmin','imagemin','watch']);
}
gulp：
跟grunt一模一样，但是要比grunt块，gulp原理的二进制的流，grunt是文件
官网：gulpjs.com
基本流程
1、安装一个gulp的命令环境
npm install gulp-cli -g
2、验证是否是ok的
gulp --version
3、准备两个文件
gulpfile.js 任务编写文件
自动生成package.json
指令：npm init 一路回车
4、npm install gulp --save-dev //下载本地的gulp
5、下载gulp的插件
gulp常用插件：
gulp-watch 监听变化
gulp-uglify 压缩js
gulp-cssmin 压缩css
gulp-htmlmin 压缩html
gulp-imagemin 压缩图片
6、编写任务
//1、引用模块
var uglify =require（‘gulp-uglify’）
//2、配置任务
gulp.task('uglify（这是任务名 随便起）',function(){
gulp.src('src/a.js')
.pipe(uglify({mangle:false}))
.pipe(gulp.dest('dest'));
})
//3、配置默认项
gulp.task('default',['任务名']);
注：gulp中内置的watch不用下载
gulp.watch('文件名',['任务名'])
整体编写步骤：gulpfile.js
//引入模块
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var cssmin=require('gulp-cssmin');
var imagemin=require('gulp-imagemin');
var concat=require('gulp-concat');
//编写任务
gulp.task('uglify:css',function(){
gulp.src('src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('build/css'))
});
gulp.task('uglify:js',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest('build/js'))
});
gulp.task('uglify:img',function(){
gulp.src('src/img/*.gif')
.pipe(imagemin())
.pipe(gulp.dest('build/img'))
});
gulp.task('uglify:html',function(){
gulp.src('src/new.html')
.pipe(htmlmin({
collapseWhitespace:true
}))
.pipe(gulp.dest('build/new.html'))
});
//监听模块
gulp.watch('src/new.html',['uglify:html']);
//注册默认任务
gulp.task('default',['uglify:css','uglify:js','uglify:img','uglify:html']);
网友评论