Gulp

几经周折，发现gulp3.9.1版本才是最好用的！我下载了nvm,配置了环境变量，正确搞定版本，真的折腾了自己一下午加一晚上。实属不易。

改了n多东西。终于配置成功。

几篇有价值的参考链接：

https://www.jianshu.com/p/9f1b5b347bd1npm修改全局包安装路径

https://blog.csdn.net/Charissa2017/article/details/104496750Gulp3的使用 npm和nvm 使用Gulp搭建web服务器
https://www.jianshu.com/p/caa1801213ee关于gulp4版本降为3.9.1

gulp4与gulp3不一样的地方

gup3 VS gulp4 区别
Gulp 4最大的变化就是你不能像以前那样传递一个依赖任务列表。
Gulp3，如果有一个任务A，B和C的列表，你想在一个序列中运行A,B,和C，代码如下：

gulp.task('default', ['A', 'B, 'C']);

不要用Gulp3的方式指定依赖任务，你需要使用gulp.series和gulp.parallel，因为gulp任务现在只有两个参数。
gulp.series：按照顺序执行
gulp.paralle：可以并行计算

gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
  // Build the website.
}));

或者这样

gulp.task('my-tasks', gulp.series('a', gulp.parallel('styles','scripts', 'images'), 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

 

 

* 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

配置编码：

//引入gulp模块
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('minifyjs',function() {
    //如果读取js下所有的.js文件（即包括子文件中的），则可以src/js/**/*.js,代表深度遍历
    return gulp.src('src/js/*.js') //找到目标源文件，将数据读取到gulp的内存中。
        .pipe(concat('built.js')) //合并到临时文件     
        .pipe(gulp.dest('dist/js')) //生成到目标文件夹 
        .pipe(uglify())    //压缩
        .pipe(rename({suffix: '.min'})) //重命名 
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default');

* 处理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 

配置编码：

这里由于我没设置依赖，先gulp lessTask再gulp cssTask即可

var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
 //less处理任务
 gulp.task('lessTask', function () {
    return gulp.src('src/less/*.less')
        .pipe(less()) //编译less文件为css文件
        
        .pipe(gulp.dest('src/css'));
  })
   //css处理任务, 指定依赖的任务
   gulp.task('cssTask', 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');

Gulp可以同步，可以异步。同步的时候不写return ,异步的时候可以设置依赖关系，

比如gulp3:

 //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']);

然后gulp4应该怎么写呢？

是的，我参考了教程，我成功了！！！我想让css在less后面执行

//引入gulp模块
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');

//注册合并压缩js的任务
gulp.task('minifyjs',function() {
    //如果读取js下所有的.js文件（即包括子文件中的），则可以src/js/**/*.js,代表深度遍历
    return gulp.src('src/js/*.js') //找到目标源文件，将数据读取到gulp的内存中。
        .pipe(concat('built.js')) //合并到临时文件     
        .pipe(gulp.dest('dist/js')) //生成到目标文件夹 
        .pipe(uglify())    //压缩
        .pipe(rename({suffix: '.min'})) //重命名 
        .pipe(gulp.dest('dist/js'));
});
 //less处理任务
 gulp.task('lessTask', function () {
    return gulp.src('src/less/*.less')
        .pipe(less()) //编译less文件为css文件
        
        .pipe(gulp.dest('src/css'));
  })
   //css处理任务, 指定依赖的任务
   gulp.task('cssTask',gulp.parallel('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',gulp.parallel('minifyjs','cssTask'));

我觉得是对的，但是等我更强了再来看看这里吧。其实异步这里还没搞太清楚 

处理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',gulp.parallel('minifyjs','cssTask','htmlMinify'));

修改页面引入（因为压缩后的index.html与在dist目录下了）

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

自动编译

    * 下载插件

npm install gulp-livereload --save-dev

配置编码:

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

热加载(实时加载)

        * 下载插件：gulp-connect

        1、 npm install gulp-connect --save-dev

        2、 注册 热加载的任务 server，注意依赖build任务 

        3、注册热加载的任务

 var connect = require('gulp-connect')

.pipe(connect.reload());

//注册监视任务（全自动）
    gulp.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', ['minifyjs'])
      gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']);
    });
    
  
    
     gulp.task('default', ['minifyjs', 'lessTask','cssTask','htmlMinify']);

* 扩展

        * 打包加载gulp插件

        * 前提：将插件下载好。

        * 下载打包插件： gulp-load-plugins

        * npm install gulp-load-plugins --save-dev

        * 引入： var $ = require('gulp-load-plugins')();！！！引入的插件是个方法，必须记住调用。

        * 神来之笔：其他的插件不用再引入了

        * 使用方法：

* 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...

gulp.task('lib', function() {
              gulp.src('bower_components/**/*.js')
              .pipe(gulp.dest(app.devPath + 'vendor'))
              .pipe(gulp.dest(app.prdPath + 'vendor'))
              .pipe($.connect.reload());
            });