gulpJs使用总结

1.gulp安装

1.首先确保你已经正确安装了nodejs环境。而后能够全局方式安装gulp：

$ npm install -g gulp

咱们能够检查一下gulp版本

$ gulp -v

这样就完成了对全局的安装
2.若是想在安装的时候把gulp写进项目package.json文件的依赖中，则能够加上--save-dev：

$ npm install --save-dev gulp

其中--save-dev和--save的区别这里也有清楚的解释

这其实在composer安装依赖包是同样的 一个存在require一个存在require-dev

2.开始使用gulp

1.和其余的构建工具同样gulpjs也须要一个相应的配置文件gulpfile.js 执行

$ touch gulpfile.js

2.首先是一个简单的egulpfile.js内容:

var gulp = require('gulp');
gulp.task('default',function(){
    // 将你的默认的任务代码放在这
});

3.运行gulp

$ gulp

要运行gulp任务，只需切换到存放gulpfile.js文件的目录，而后在命令行中执行gulp命令就好了，gulp后面能够加上要执行的任务名，例如gulp task1，若是没有指定任务名，则会执行任务名为default的默认任务

这里默认的名为 default 的任务（task）将会被运行，可是这个任务并未作任何事情。
若是想要单独执行特定的任务，请输入

gulp <task> <othertask>

3.gulp API使用

gulp只有五个方法:task run watch src dest

1.gulp.src(globs[, options])

• globs参数是文件匹配模式(相似正则表达式),他的类型是String或Array,用来匹配文件路径(包括文件名)，固然这里也能够直接指定某个具体的文件路径。当有多个匹配模式时，该参数能够为一个数组。

• options为可选参数。一般状况下咱们不须要用到。

咱们这里简单能够理解为这个方法就是读取你须要操做的文件的

当有多个匹配规则时 能够传入数组 如:

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

除此以外 数组还能够进行排除的匹配(ps:数组的第一个元素不能进行排除模式)

gulp.src([*.js,'!a*.js']) //    匹配全部js文件，但排除掉以a开头的js文件

gulp.src(['!a*.js',*.js]) //不会排除任何文件，由于排除模式不能出如今数组的第一个元素中

---

2.gulp.dest(path[, options])
简单的说gulp.dest()是用来写文件的

• path为写入文件的路径

• options为一个可选的参数对象，一般咱们不须要用到

gulp的运行流程大体是这样的:

gulp的使用流程通常是这样子的：首先经过gulp.src()方法获取到咱们想要处理的文件流，

而后把文件流经过pipe方法导入到gulp的插件中，最后把通过插件处理后的流再经过pipe方法导入到gulp.dest()中，

gulp.dest()方法则把流中的内容写入到文件中，这里首先须要弄清楚的一点是，

咱们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，

它生成文件的文件名使用的是导入到它的文件流自身的文件名，因此生成的文件名是由导入到它的文件流决定的，

即便咱们给它传入一个带有文件名的路径参数，而后它也会把这个文件名当作是目录名，例如：

var gulp = require('gulp');
gulp.src('script/jquery.js')
    .pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js

经过指定gulp.src()方法配置参数中的base属性，咱们能够更灵活的来改变gulp.dest()生成的文件路径。
当咱们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现以前那部分路径，例如：

gulp.src('app/src/**/*.css') //此时base的值为 app/src

gulp.src()的bade属性能够在options里指定

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'
  
gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
   //假设匹配到的文件为script/lib/jquery.js
   .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js

咱们能够这样理解:
上面咱们说的gulp.dest()所生成的文件路径的规则，其实也能够理解成，用咱们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终获得生成文件的路径。

---

3.gulp.task(name[, deps], fn)

• name 为任务名(请不要在名字中使用空格)

• deps 是当前定义的任务须要依赖的其余任务，为一个数组。当前定义的任务会在全部依赖的任务执行完毕后才开始执行。若是没有依赖，则可省略这个参数

• fn 为任务函数，咱们把任务要执行的代码都写在里面。该参数也是可选的。

gulp中执行多个任务，咱们的项目里确定会有处理相似css js images fonts 这样的静态文件的几个任务
能够经过任务依赖来实现。例如我想要执行one,two,three这三个任务，那咱们就能够定义一个空的任务，而后把那三个任务当作这个空的任务的依赖就好了：

//只要执行default任务，就至关于把css,images,scripts这三个文件任务执行了
gulp.task('default',['css','images','scripts']);

若是任务相互之间没有依赖，任务会按你书写的顺序来执行，若是有依赖的话则会先执行依赖的任务。

在处理所依赖的任务是异步的这样的应用场景也是有几种解决方案的：

• 依赖任务异步执行

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

gulp.watch()用来监视文件的变化，当文件发生变化后，咱们能够利用它来执行相应的任务，例如文件压缩等。

• glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。

• opts 为一个可选的配置对象，一般不须要用到

• tasks 为文件变化后要执行的任务，为一个数组

每当监视的文件发生变化时，就会调用这个函数,而且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，能够是added,changed,deleted；path属性为发生变化的文件的路径

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 
    console.log(event.path); //变化的文件的路径
}); 

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type);
});

4.gulp 插件使用

gulp 插件库

1.自动加载 gulp-load-plugins

安装: npm install --save-dev gulp-load-plugins

在使用gulp插件时都须要require进来 而这个插件很好的解决了这个问题

gulp-load-plugins并不会一开始就加载全部package.json里的gulp插件，而是在咱们须要用到某个插件的时候，才去加载那个插件。

由于gulp-load-plugins是经过你的package.json文件来加载插件的，因此必需要保证你须要自动加载的插件已经写入到了package.json文件里，而且这些插件都是已经安装好了的

下面这是一段一段很方便使用其余插件的load-plugins代码(其实就是匹配到package.json里的插件):

var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/
});

这样就能够经过 plugins.name()来使用咱们的插件 举一个简单的使用gulp-rename这个插件的例子

gulp.task('one',function () {
    gulp.src(paths.styles.src+'/one.css')
        .pipe(plugins.rename('new.css')) //而不用声明相似var rename = require('gulp-rename')
        .pipe(gulp.dest(paths.styles.dest));
});

2.重命名gulp-rename

安装：npm install --save-dev gulp-rename

var rename = require('gulp-rename');
//最后将src/styles/one.css 生成到 assets/styles/new.css
gulp.task('one',function () {
    gulp.src('src/styles/one.css')
        .pipe(rename('new.css'))
        .pipe(gulp.dest('asstes/styles'));
});

3.js文件压缩 gulp-uglify

安装：npm install --save-dev gulp-uglify

var gulp = require('gulp'),
    uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
    gulp.src('src/scripts/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩
    .pipe(gulp.dest('assets/js')); //压缩后的路径
});

4.文件合并 gulp-concat

安装：npm install --save-dev gulp-concat

var gulp = require('gulp'),
    concat = require("gulp-concat")
    uglify = require("gulp-uglify");
 
//若是src/scripts下有one.js two.js three.js  那么最后合并到assets/js/all.js
gulp.task('concat', function () {
    gulp.src('src/scripts/*.js')  //要合并的文件
    .pipe(uglify())  //使用uglify进行压缩
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('assets/js'));
});

5.less和sass的编译

安装：npm install --save-dev gulp-less npm install --save-dev gulp-sass

var gulp = require('gulp'),
    less = require("gulp-less");
 
gulp.task('compile-less', function () {
    gulp.src('src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('assets/css'));
});

固然还有其余很是有用插件 gulp 插件库

相关资料参考于:

• gulp Api文档

• 前端构建工具gulp