gulp基础使用方法记录

一、开始

使用gulp，需知道4个API：

　　gulp.task():用来定义任务,

　　　　　　　　　 格式：gulp.task(name[, deps], fn)

　　　　　　　　    name 为任务名

　　　　　　　　    deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
　　　　　　　　    fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

　　gulp.src()：用来读取文件,

　　　　　　　  　格式：gulp.src(globs[, options])，

　　　　　　　　  globs  参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
　　　　　　　　  options  为可选参数。通常情况下我们不需要用到。

　　gulp.dest()：用来写文件的：,

　　　　　　　　　格式：gulp.dest(path[,options])

　　　　　　　　　path  为写入文件的路径
　　　　　　　　　options  为一个可选的参数对象，通常我们不需要用到

　　gulp.watch()：用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等,

　　　　　　　　　   格式：gulp.watch(glob[, opts], tasks)

　　　　　　　　  　 glob  为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
　　　　　　　　　   opts  为一个可选的配置对象，通常不需要用到
　　　　　　　　   　tasks  为文件变化后要执行的任务，为一个数组

 

二、实例

　　需要先安装gulp

　npm install -g gulp

　　手动建立一个gulpfile.js文件，作为入口，

　　初始化，引入gulp　　

npm init;
npm install --save-dev gulp;

　　然后在gulpfile.js写入

var gulp = require('gulp');

var plugins = require('gulp-load-plugins')();

var src = {
    js: 'js/*.js',
    html: './*.html',
    css: 'css/*css',
    img: 'img/**'
}

var buildGulp = {
    // html 打包
    buildHtml: () => {
        gulp.src(src.html)
        .pipe(plugins.minifyHtml())
        .pipe(gulp.dest('./dist'));
    },
    // css 打包
    buildCss: () => {
        gulp.src(src.css)
        .pipe(plugins.minifyCss())
        .pipe(gulp.dest('dist/css'));
    },
    // js 打包
    buildJs: () => {
        gulp.src(src.img)
        .pipe(plugins.imagemin())
        .pipe(gulp.dest('dist/img'));
    },
    // img打包
    buildImg: () => {
        gulp.src(src.js)
        .pipe(plugins.uglify())
        .pipe(gulp.dest('dist/js'));
    },
};

gulp.task('default',function(){
    gulp.start('build')
});

gulp.task('build', function(){
    for ( var i in buildGulp){
        buildGulp[i]();
    }
});

我们用gulp-uglify压缩js, gulp-minify-css压缩css, gulp-minify-html压缩html，gulp-imagemin压缩图片

为避免在文件头部引入依赖时过去冗长，引入gulp-load-plugins来从package.json中引入依赖，通过调用实例中的方法来加载依赖，加载方式为按需加载

最后执行gulp，会从名称为default的task开始执行，打包文件，输出的文件由gulp.dest设置在dist目录下