gulp

gulp task npm install package

• 自动化任务和管理
  
  • 创建开发用的服务器 监视文件的变化 若果文件变化执行之前设计好的任务（例如：编译less 或者 sass，压缩js或者css，然后把这些文件放在你指定的地方，再然后刷新浏览器）

1. install

• gulp bases on npm
• 所以用npm安装和管理
• 要求，全局安装，然后项目中也要安装，使用命令行来安装。
  全局安装命令 npm install -g gulp
guop --help :显示帮助信息

2. package

• 流程
  
  • cd desktop 到桌面
  • md cdd-gulp 创建一个文件夹
  • npm init 初始化npm
  • 输入初始化的一些信息
  • dir 显示文件夹里面的内容
  • 安装项目本地的gulp
    
    • 安装命令是 npm install gulp --save-dev
    • --save-dev这个后缀会让信息添加到package.json里面，一次作为项目开发的依赖
  • 如果在package.json文件里已经列出了所有开发依赖或所需要的文件，只需在命令行里使用 npm install命令便可下载到所有需要的文件。

3. task 建立和使用任务

• 在项目中创建gulpfile.js文件，该文件用来在项目中设置要执行的任务，属于一个js文件
• 使用gulp的流程
  
  • 0.首先使用require("");方法导入要使用的模块，并创建其对象
    eg: var gule = gulp('gulp')};</li>
<li>2.使用task方法创建要执行的任务
syntax: gulp.task('tastName',function(){});
eg: gulp.task('hellw,function(){
console.log("您好")};);
  • 3.使用数组用来包含其他任务，可以嵌套来达到一下子执行多个任务
    syntax: gulp.task('taskName',['otherTaskName1','otherTaskName2',...])
  • 4.执行任务，在命令以gulp开始，后面直接跟任务的名字即可
    eg: gulp hello按回车便开始执行

4. basic基础部分

• 读取文件 gulp.src()
• .pipe()处理文件，在其中可以使用gulp的插件来处理读取出来的文件
• .pipe(gulp.dest())把处理好的文件放到指定的地方

5. copy 使用上述所学，实现一个复制文件的操作

• 源代码
  javaScript

var gulp = require('gulp');//创建gulp对象
gulp.task('copy-index',function(){//创建task
    return gulp.src('index.html').pipe(gulp.dest("dist"));//使用src方法读取文件，然后放入管道，在使用gulp的dest方法把其放置到一个新建的文件夹中，完成复制。
});

6. copy-multi 复制多个？glob写法

• 源代码

`gulp`
var gulp = require('gulp');
gulp.task('copy-index',function(){
    return gulp.src('index.html').pipe(gulp.dest("dist"));
});
gulp.task('images',function(){
    return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));//整个’images/*.jpg‘写法称作glob，通配符‘*’表示大量匹配，整个glob的意思是，匹配在images文件夹中以.jpg结尾的文件。
});

7. glob 大量规则匹配方式

• 把目标文件下的跟个多文件复制走在gulp.arc方法中使用中括号加扩展名
  eg: guli.src({fileNmae1,fileName2})
  注意其中的文件后缀名没有空格
• 在上述的方法中不包括icons及其文件，如果想要包含该文件夹可以使用images/*,但是此时不包含icons文件夹中的文件，如果想要包含其中的文件可以使用images/*/*;如果不在乎级别想要整个复制目标文件夹中的所有东西可以使用images/**/*方法。即使用两个星号表示所有的级别。

8. glob-multi 多个glob

• 使用数组创建和执行执行多个glob
  javaScript

gulp.task('data',function(){
    return gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));//利用数组增加需要操作的文件数量来进行更多的文件操作
});

9. negate 排除

• 在gob中添加需要排除的文件，在前面使用‘！’叹号便可。
  *源代码
  javascript

gulp.task('data',function(){
    return gulp.src(['xml/*.xml','json/*.json','!json/secret*.json']).pipe(gulp.dest('dist/data'));//利用叹号！排除需要复制的文件
});

10. master 管理其他任务

• 一个任务依赖于其他的任务，可以使用数组来嵌套包含其他任务，让其他任务执行。
• 源代码
  javascript

gulp.task('build',['copy-index','images','data'],function(){
    console.log("执行完毕!");//是用数组执行要执行的任务
});

11. watch监视

• 监视指定的文件，当这些文件发生改变时，执行一些任务，例如刷新浏览器
• 使用的方法是gulp.watch
• 语法
  syntax: gulp.watch('files',['functionName']);
  前面的files参数可以使用数组
• 源代码
  javascript

//watch 监视文件变化
gulp.task('watch',function(){
    gulp.watch('index.html',['copy-index']);
    gulp.watch('images/**/*.{jpg,png}',['images']);
    gulp.watch(['xml/*.xml','json/*.json','!json/secret*.json'],['data']);
})

12. plugins 插件

• gulp本身的功能主要是，读取文件，监视文件，把文件放到指定的位置等基本的操作其他更多的功能需要使用插件来实现
• 常用的插件功能有，编译less、sass，刷新浏览器、压缩编译好的文件，对文件合并和重命名，对图片的尺寸操作，本地开发的服务器等。

• 使用方法

  • 都比较类似
    在项目中安装这个插件，然后在gulpfile文件中写入该文件，然后再给这个插件一个名字就可以了。

  13. sass-compile sass的编译

  • 使用插件gulp.sass
  • 流程
    1.打开命令工
    2.然后进入项目所在目
    3.下载插件
    命令是：npm install gulp-sass --save-dev
  • 因为国内gfw的原因，我们不是能够总是顺利的使用到npm的东西，本人在折腾时就遇到重重困难，最后被迫无奈使用淘宝的镜像，之后一切事情迎刃而解。首先要感谢淘宝镜像，其次作为个开发者，真是很无奈，然而也无处发声。
  • 使用淘宝细节需要更改下载插件的路径，既然要走这条路了，那就彻底的使用淘宝的东西吧，把npm的命令改成cnpm，哎。。。。
    有一点需要注意下，那就是有个publish命令是cnpm所不能覆盖的，毕竟这相当于完全的改头换面，多去别人的智慧，任谁也都不会答应的。

14. connect 链接本地服务器

• 创建本地服务器，运行文件
• 使用的插件是gulp-connect
• 方法：
  
  • 建立对象
  • 然后是server方法设置root
  • 三在命令行启动，可以使用ctrl+c，停止服务器。

15. reload，实时刷新

• 在需要刷新的task中，添加.pipe,设置刷新
• 源码
  javascript

var connect = require('gulp-connect');//创建对象
gulp.task('server',function(){//服务器设置
    connect.server({
        root:'dist',//这个始对象的root属性
        livereload: true//livereload属性
    });
});
gulp.task('copy-index',function(){
    return gulp.src('index.html')
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());//添加到copy-index任务的pipe方法。
});

16. concat 合并

• 插件gulp-concat
• 方法
  
  • 使用require创建对象
  • 在管道中使用对象方法即可，而且可以使用一个命名的字符串参数。
• 源码
  gulp

gulp.task('script', function(){
    return gulp.src(['js/needConcat.js', 'js/needConcat_1.js'])
    .pipe(concat('vender.js'))//可以命名
    .pipe(gulp.dest('dist/js'));
});

17. uglify 压缩js文件

• 插件 gulp-uglify
• 方法
  
  • 不需要创建新的任务，在合并js文件的方法中使用pipe管道即可
• 源码
  gulp

gulp.task('script', function(){
    return gulp.src(['js/needConcat.js', 'js/jquery*.js'])
    .pipe(concat('vender.js'))//合并js文件的管道
    .pipe(uglify())//此处是压缩js文件的管道
    .pipe(gulp.dest('dist/js'));
});

18. rename重命名

• plugin gulp-rename
• 方法
  
  • 在输出到文件之前使用对象给文件命名，无序新建任务，在需要的地方创建pipe管道即可
• 源码
  gulp

gulp.task('script', function(){
    return gulp.src(['js/needConcat.js', 'js/jquery*.js'])
    .pipe(concat('vender.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(uglify())
    .pipe(rename('vender.min.js'))//重命名的地方
    .pipe(gulp.dest('dist/js'));
});

18. minifyCSS压缩css

• plugin gulp-minifyCSS
• 方法
  
  • 无序创建新的task，只需在编译less或者sass的任务中增加管道，添加minifycss对象方法即可
• 源码
  gulp

gulp.task('sass', function(){
    return gulp.src('stylesheet/**/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())//压缩css的管道
    .pipe(gulp.dest('dist/css'));
});

19. imagemin 压缩图片

• plugin gulp-imagemin
• 方法
  
  • 无需创建新的方法,在复制图片的方法中添加压缩图片的管道即可
    *源码
    gulp

gulp.task('images',function(){
    return gulp.src('images/**/*')
    .pipe(imagemin())//压缩图片的管道
    .pipe(gulp.dest('dist/images'));
});