Grunt与Gulp自动化构建工具的使用

grunt 的特点是热刷新 压缩代码 检查规范代码 帮忙sass编译

1.安装grunt的命令环境

               npm install grunt-cli -g

               验证是否成功 grunt --version

2.准备文件

               Gruntfiles.js     编写任务 手动建立文件

               package.json     工程文件 所有下载模块的依赖

                                        name 不能用默认,或者grunt

3.准备本地的grunt 

          npm install grunt -D  建立

4.下载插件 例contrib-uglify

           npm install grunt-contrib-uglify --save-dev

 

               npm  install 插件名称 --save-dev

5.编写GruntFiles.js文件

 grunt常见的组件

          grunt-contrib-uglify 压缩js

          grunt-contrib-watch 监听变化

          grunt-contrib-cssmin压缩css

          grunt-contrib-htmlmin 压缩html代码

          grunt-contrib-imgmin 压缩图片

          grunt-contrib-concat  合并文件

          grunt-contrib-clean 删除文件及文件夹

          grunt-contrib-copy 复制东西

          grunt-contrib-jshint 检查代码格式

          grunt-contrib-sass 检查sass

          grunt-contrib-less 检查less

gulp
　　与grunt功能一样

     区别:

     1.gulp速度比grunt快

          grunt是通过文件的机制来压缩

          gulp是通过二进制流

               二进制流是计算机编码的编制

     2.grunt需要下载watch监听组件

          gulp不需要下载watch组件

使用

　　

1.安装命令环境

               npm install gulp-cli -g

               检查安装成功 gulp --version

2.准备两个文件

               gulpfile.js     gulp首字母都是小写

               工程文件 npm init

3.准备本地gulp

               npm install gulp --save-dev

4.编写任务

               a)下载模块      npm install --save-dev gulp-uglify

               b)引入模块     

　　　　c)编写任务

gulp常用的插件

          gulp-rename 重命名

          gulp -cssmin压缩css

          gulp -htmlmin 压缩html代码

          gulp -imgmin 压缩图片

          gulp -concat  合并文件

          gulp -clean 删除文件及文件夹

          gulp -copy 复制东西

          gulp -jshint 检查代码格式

          gulp -sass 检查sass

          gulp -less 检查less

特别注意事项 gulp中所有文件用*来表示  所有的文件夹用**