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目录下

转载于:https://www.cnblogs.com/lastnigtic/p/6974961.html