首页 > 代码库 > glup学习

glup学习

建立:在项目根目录新建一个js文件并命名为gulpfile.js;

方法:gulp只有五个方法:

  • task:用来定义任务
    • 当定义一个简单的任务时,需要传入任务名字和执行函数两个属性。
    • 一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务可以通过指定一个任务数组而不是函数来完成。
      gulp.task(‘build‘, [‘css‘, ‘js‘, ‘imgs‘]);
    • 这些任务不是同时进行的,所以你不能认为在js任务开始的时候css任务已经结束了,也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束,可以将函数和任务数组结合起来指定其依赖关系。
      gulp.task(‘css‘, [‘greet‘], function () {   // Deal with CSS here});
  • run
  • watch:监听文件,它接受一个glob或者glob数组(和gulp.src()一样)以及一个任务数组来执行回调。
    • build任务可以将模板转换成html格式,然后定义一个watch任务来监听模板文件的变化,
      gulp.task(‘watch‘, function () {   gulp.watch(‘templates/*.tmpl.html‘, [‘build‘]);});
    • 也可以给watch函数一个回调函数

      gulp.watch(‘templates/*.tmpl.html‘, function (event) {   console.log(‘Event type: ‘ + event.type); // added, changed, or deleted   console.log(‘Event path: ‘ + event.path); // The path of the modified file});  
    • 在返回的watcher中添加监听事件: 

      var watcher = gulp.watch(‘templates/*.tmpl.html‘, [‘build‘]);watcher.on(‘change‘, function (event) {   console.log(‘Event type: ‘ + event.type); // added, changed, or deleted   console.log(‘Event path: ‘ + event.path); // The path of the modified file});
      • end 在watcher结束时触发(这意味着,在文件改变的时候,任务或者回调不会执行)
      • error 在出现error时触发
      • ready 在文件被找到并正被监听时触发
      • nomatch 在glob没有匹配到任何文件时触发
    • 在返回的watcher中使用函数:
      • watcher.end() 停止watcher(以便停止执行后面的任务或者回调函数)
      • watcher.files() 返回watcher监听的文件列表
      • watcher.add(glob) 将与指定glob相匹配的文件添加到watcher(也接受可选的回调当第二个参数)
      • watcher.remove(filepath) 从watcher中移除个别文件
  • src:gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组,然后返回一个可以传递给插件的数据流。例子:
    • js/app.js 精确匹配文件
    • js/*.js 仅匹配js目录下的所有后缀为.js的文件

    • js/**/*.js 匹配js目录及其子目录下所有后缀为.js的文件
    • !js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
    • *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件
  • dest  ://在stream中对应输出流

基本代码:

  • 引入组件     //下载:   npm install gulp-jshint --save-dev
    var gulp = require(‘gulp‘); var jshint = require(‘gulp-jshint‘);var sass = require(‘gulp-sass‘);var concat = require(‘gulp-concat‘);var uglify = require(‘gulp-uglify‘);var rename = require(‘gulp-rename‘);

    常用组件:

    gulp-ruby-sass : 支持sass
    gulp-minify-css : 压缩css
    gulp-jshint : 检查js
    gulp-uglify : 压缩js
    gulp-concat : 合并文件
    gulp-rename : 重命名文件
    gulp-htmlmin : 压缩html
    gulp-clean : 清空文件夹

  • Lint任务: //Link任务会检查js/目录下得js文件有没有报错或警告。

    gulp.task(‘lint‘, function() {         gulp.src(‘./js/*.js‘)                    .pipe(jshint())                      .pipe(jshint.reporter(‘default‘));});
  • 编译,以Sass为例 ://Sass任务会编译scss/目录下的scss文件,并把编译完成的css文件保存到/css目录中。
    gulp.task(‘sass‘, function() {    gulp.src(‘./scss/*.scss‘)        .pipe(sass())        .pipe(gulp.dest(‘./css‘));     //})  
  • 合并,以js为例;//scripts任务会合并js/目录下得所有得js文件并输出到dist/目录,然后gulp会重命名、压缩合并的文件,也输出到dist/目录。
    gulp.task(‘scripts‘, function() {    gulp.src(‘./js/*.js‘)        .pipe(concat(‘all.js‘))        .pipe(gulp.dest(‘./dist‘))        .pipe(rename(‘all.min.js‘))        .pipe(uglify())        .pipe(gulp.dest(‘./dist‘));});  
  • 基于其他任务:创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务,使用.watch()方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。
    gulp.task(‘default‘, function(){    gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);    gulp.watch(‘./js/*.js‘, function(){        gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);    });});

      

 

glup学习