grunt gulp 使用

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']);