gulp入门－－基于流的创建工具

浅浅的花香味﹌ 2021-10-09 03:56 319阅读 0赞

gulp是什么？ gulp是一个基于流的构建工具，可以自动执行指定的任务，简洁且高效　　（所以有管道pipe啊～～） gulp能做什么 开发环境下，想要能够按模块组织代码，监听实时变化 css/js预编译，postcss等方案，浏览器前缀自动补全等 条件输出不同的网页，比如app页面和mobile页面 线上环境下，我想要合并、压缩 html/css/javascritp/图片，减少网络请求，同时降低网络负担 等等... 安装gulp npm install -g gulp //全局安装 npm install --save-dev gulp //安装到当前项目并在package.json中添加依赖 核心API介绍 gulp.task task(name[, deps], fn) task()方法用于定义任务，传入名字、依赖任务数组、函数即可，gulp会先执行任务数组，结束后调用定义的函数，可以通过此手段控制任务的执行顺利。 例子：要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。 gulp.task('build', ['css', 'js', 'imgs']);
     gulp.src src(globs[, options]) src()方法输入一个glob或者glob数组，然后返回一个可以传递给插件的数据流 Gulp使用node-glob来从你指定的glob里面获取文件： app.js 精确匹配 *.js 能匹配js后缀的文件 **/*.js 能匹配多级目录下的js文件（也包含当前目录下） !js/app.js 精确排除 例子：js目录下包含了压缩和未压缩的js文件，我们想要压缩还没有被压缩的文件 gulp.src(['js/**/*.js', '!js/**/*.min.js'])
     gulp.dest dest(path[, options]) dest()方法用来写文件，第一个参数表示最终输出的目录名。注意，它无法允许我们指明最终输出的文件名，只能指定输出文件夹名，而且在文件夹不存在的情况下会自动创建。 例子：把开发目录src下的js文件输出到部署目录dist下 gulp.src('src/**/*.js')
      .pipe(gulp.dest('dist'))
     gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks) watch()方法可以监听文件，它接受一个glob或者glob数组以及一个任务数组来执行回调 // 当templates目录下的模板文件发生变化，自动执行编译任务 gulp.task('watch', function (event) { gulp.watch('templates/*.tmpl.html', ['artTemplate']); console.log('Event type: ' + event.type); // added, changed, or deleted console.log('Event path: ' + event.path); // The path of the modified file }); Gulp.watch()的另一个非常好的特性是返回watcher对象 watcher对象可以监听很多事件: change 文件变化时触发 end 在watcher结束时触发 error 在出现error时触发 ready 在文件被找到并正被监听时触发 nomatch 在glob没有匹配到任何文件时触发 Watcher对象也包含了一些可以调用的方法： watcher.end() 停止watcher watcher.files() 返回watcher监听的文件列表 watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数） watcher.remove(filepath) 从watcher中移除个别文件 配置文件 gulpfile.js gulp流程图 任务会让所有的文件匹配js/*.js，并且执行JSHint，然后打印输出结果，取消文件缩进，最后把他们合并起来，保存为build/app.js，整个过程如下图所示： var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });       
      
       
     
      
    
    作者：齐修_qixiuss
    链接：https://www.jianshu.com/p/9723ca2a2afd
    來源：简书
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。