Gulp: краткое руководство по началу работы

1. Введение в Gulp:

• Введение в глоток
  • Китайская домашняя страница:www.gulpjs.com.cn/
  • глоток похож на хрюканьеФронтальная сборка проектаинструмент, также основанный на Nodejs автоматическибегун задач
  • Может автоматически выполнять файлы, такие как JavaScript / Coffee / Sass / Mens / HTML / Image / CSS Слияние, сжатие, проверка, изменение файла монитора, автоматическое обновление браузера, тестирование и другие задачи
  • gulp более эффективен (асинхронная многозадачность), проще в использовании, высококачественные плагины
• Установите nodejs, проверьте версию: node -v
• Создайте простое приложение gulp_test

  |- dist
  |- src
    |- js
    |- css
    |- less
  |- index.html
  |- gulpfile.js-----gulp配置文件
  |- package.json
    {
      "name": "gulp_test",
      "version": "1.0.0"
    } 
  

• Установить глоток:
  • Установить gulp глобально

    npm install gulp -g
    

  • Установить глоток локально

    npm install gulp --save-dev
    

  • Настроить кодировку: gulpfile.js

    //引入gulp模块
    var gulp = require('gulp');
    //定义默认任务
    gulp.task('任务名', function() {
      // 将你的任务的任务代码放在这
    });
    gulp.task('default', ['任务'])//异步执行
    

  • Команда сборки:

    gulp
    

• Используйте плагин gulp
  • Связанные плагины:
    • gulp-concat : объединить файлы (js/css)
    • gulp-uglify : сжимать файлы js
    • gulp-rename : переименовать файл
    • gulp-less: компилировать меньше
    • gulp-clean-css : сжать css
    • gulp-livereload : автоматическое обновление компиляции в реальном времени
  • Важный API
    • gulp.src(filePath/pathArr) :
      • Все файлы, указывающие на указанный путь, возвращают объект файлового потока
      • для чтения файлов
    • gulp.dest(dirPath/pathArr)
      • указывает на все указанные папки
      • для экспорта файлов в папку
    • gulp.task(name, [deps], fn)
      • определить задачу
    • gulp.watch()
      • Отслеживание изменений файлов
  • обрабатывать js
    • создать js-файл
      • src/js/test1.js

        (function () {
          function add(num1, num2) {
            var num3 = 0;
            num1 = num2 + num3;
            return num1 + num2;
          }
          console.log(add(10, 30));
        })();
        

      • src/js/test2.js

        (function () {
          var arr = [2,3,4].map(function (item, index) {
              return item+1;
          });
          console.log(arr);
        })();
        

    • Загрузите плагин:

      npm install gulp-concat gulp-uglify gulp-rename --save-dev
      

    • настроить кодировку

      var concat = require('gulp-concat');
      var uglify = require('gulp-uglify');
      var rename = require('gulp-rename');
      
      gulp.task('minifyjs', function() {
          return gulp.src('src/js/*.js') //操作的源文件
              .pipe(concat('built.js')) //合并到临时文件     
              .pipe(gulp.dest('dist/js')) //生成到目标文件夹
              .pipe(rename({suffix: '.min'})) //重命名  
              .pipe(uglify())    //压缩
              .pipe(gulp.dest('dist/js'));
      });
      
      gulp.task('default', ['minifyjs']);
      

    • Страница представляет тест просмотра js: index.html

      <script type="text/javascript" src="dist/js/built.min.js"></script>
      

    • Пакетный тест: глоток
  • обрабатывать css
    • Создать меньше/css файл
      • src/css/test1.css

        #div1 {
          width: 100px;
          height: 100px;
          background: green;
        }
        

      • src/css/test2.css

        #div2 {
          width: 200px;
          height: 200px;
          background: blue;
        }
        

      • src/less/test3.less

        @base: yellow;
        .index1 { color: @base; }
        .index2 { color: green; }
        

    • Загрузите плагин:

      npm install gulp-less gulp-clean-css --save-dev 
      

    • настроить кодировку

      var less = require('gulp-less');
      var cleanCSS = require('gulp-clean-css');
      
      //less处理任务
      gulp.task('lessTask', function () {
        return gulp.src('src/less/*.less')
            .pipe(less()) 
            
            .pipe(gulp.dest('src/css'));
      })
      //css处理任务, 指定依赖的任务
      gulp.task('cssTask',['lessTask'], function () {
      
        return gulp.src('src/css/*.css')
            .pipe(concat('built.css'))
            .pipe(gulp.dest('dist/css'))
            .pipe(rename({suffix: '.min'}))
            .pipe(cleanCSS({compatibility: 'ie8'}))
            .pipe(gulp.dest('dist/css'));
      });
      
      gulp.task('default', ['minifyjs', 'cssTask']);
      

    • На странице представлен тест просмотра css: index.html

      <link rel="stylesheet" href="dist/css/built.min.css">
      <div id="div1" class="index1">div1111111</div>
      <div id="div2" class="index2">div2222222</div>
      

    • Пакетный тест: глоток
  • процесс html
    • Загрузите плагин:

      npm install gulp-htmlmin --save-dev
      

    • настроить кодировку

      var htmlmin = require('gulp-htmlmin');
      //压缩html任务
      gulp.task('htmlMinify', function() {
          return gulp.src('index.html')
              .pipe(htmlmin({collapseWhitespace: true}))
              .pipe(gulp.dest('dist'));
      });
      gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']);
      

    • Изменить импорт страницы

      <link rel="stylesheet" href="css/built.min.css">
      <script type="text/javascript" src="js/built.min.js"></script>
      

    • Пакетный тест: глоток
  • автоматическая компиляция

    • Скачать плагин

      npm install gulp-livereload --save-dev
      

    • Настроить кодировку:

      var livereload = require('gulp-livereload');
                
      //所有的pipe
      .pipe(livereload())
      
      gulp.task('watch', ['default'], function () {    
        //开启监视
        livereload.listen();
        //监视指定的文件, 并指定对应的处理任务
        gulp.watch('src/js/*.js', ['minifyjs'])
        gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']);
      });
      

    • Горячая загрузка (загрузка в реальном времени)

      • Скачать плагин: gulp-connect

      1、 npm install gulp-connect --save-dev ; npm install open --save-dev 
      2、 注册 热加载的任务 server，注意依赖build任务 
      3、注册热加载的任务
          var connect = require('gulp-connect');
          
          //所有的pipe
          .pipe(connect.reload())
          
          //配置加载的选项
          connect.server({
                root : 'dist/',//监视的源目标文件路径
                livereload : true,//是否实时刷新
                port : 5000//开启端口号
           });
           // 自动开启链接
           open('http://localhost:5000');//npm install open --save-dev
           // 监视目标文件
          gulp.watch('src/js/*.js', ['js']);
          gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);
      

    • расширять

      • Упакуйте и загрузите плагин gulp
      • Предварительное условие: Загрузите плагин.
      • Скачать упакованные плагины: gulp-load-plugins
      • npm install gulp-load-plugins --save-dev
      • Добавлено: var $ = require('gulp-load-plugins')();! ! ! Представленный плагин представляет собой метод, который необходимо помнить для вызова.
      • Волшебные штрихи: нет необходимости вводить другие плагины
      • Инструкции:

        所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
        gulp.task('less', function () {
        return gulp.src('src/less/*.less')
         .pipe($.less())//将less转换为less
         .pipe(gulp.dest('src/css/'))//将转换为less的文件输出到src下
         .pipe($.livereload())//实时刷新
         .pipe($.connect.reload())
        });
        

2. Конфигурация файла Gulpfile.js:

var gulp = require('glup');
// var concat = require('glup-concat');
// var uglify = require('glup-uglify');
// var rename = require('glup-rename');
// var less = require('glup-less');
// var cleanCss = require('glup-clean-css');
// var htmlmin = require('gulp-htmlmin');
// var livereload = require('gulp-livereload');
// var connect = require('gulp-connect');
// var open = require('open');

var $ = require('gulp-load-plugins')(); //打包加载gulp插件,即上面的插件都不用自己导入。

// 注册合并压缩js的任务
gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')  //可以深度遍历
        .pipe($.concat('build.js'))      //临时合并文件，并指定文件名为build.js
        .pipe(gulp.dest('dist/js/'))   //指定输出的目录，到本地目录
        .pipe($.uglify())                //压缩文件
        .pipe($.rename({suffix: '.min'}))//重命名
        .pipe(gulp.dest('dist/js'))    //再重新输出
        // .pipe(livereload())
        .pipe($.connect.reload())
});

// 注册转换less的任务
gulp.task('less', function () {
    return gulp.src('src/less/*.less')
        .pipe($.less())                  //编译less文件为css文件
        .pipe(gulp.dest('src/css'))   //输出文件
        // .pipe(livereload())
        .pipe($.connect.reload())
});

//css处理任务, 指定依赖的任务
gulp.task('css', ['less'], function () {
    return gulp.src('src/css/*.css')
        .pipe($.concat('built.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.cleanCss({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css'))
        // .pipe(livereload())
        .pipe($.connect.reload())
});

//压缩html任务
gulp.task('html', function () {
    return gulp.src('index.html')
        .pipe($.htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/'))
        // .pipe(livereload())
        .pipe($.connect.reload())
});

//注册监视任务（半自动）
gulp.task('watch', ['default'], function () {
    //开启监视
    livereload.listen();
    //监视指定的文件, 并指定对应的处理任务
    gulp.watch('src/js/*.js', ['js'])
    gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
});

//注册监视任务（全自动）
glup.task('server', ['default'], function () {
    //配置服务器的选项
    $.connect.server({
        root: 'dist/',//监视的源目标文件路径
        livereload: true,//是否实时刷新
        port: 5000//开启端口号
    });
    // 自动开启链接
    open('http://localhost:5000');//npm install open --save-dev
    // 监视目标文件
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch(['src/css/*.css', 'src/css/*.less'], ['css', 'less']);
});

//注册默认任务（异步执行的）
gulp.task('default', ['js', 'less', 'css', 'html']);