Glup疾速入门整顿

  • Gulp引见

    • 中文主页: http://www.gulpjs.com.cn/

    • gulp是与grunt功用相似的前端项目构建东西, 也是基于Nodejs的自动使命运转器

    • 能自动化地完成 javascript/coffee/sass/less/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:

    • 全局装置gulp

      npm install gulp -g
    • 部分装置gulp

      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 : 编译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>
      • 打包测试: gulp

    • 处置惩罚css

      • 建立less/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>
      • 打包测试: gulp

    • 处置惩罚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>
      • 打包测试: gulp

    • 自动编译

      • 下载插件

        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
          2、 注册 热加载的使命 server,注重依靠build使命 
          3、注册热加载的使命
              //设置加载的选项
              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())
          });
          
          
    原文作者:booder
    原文地址: https://segmentfault.com/a/1190000010289128
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞