• Gulp:自动化构建工具


    一.介绍:

      gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效

    二.优点:

    1. 开发环境下,想要能够按模块组织代码,监听实时变化
    2. css/js预编译,postcss等方案,浏览器前缀自动补全等
    3. 条件输出不同的网页,比如app页面和mobile页面
    4. 线上环境下,我想要合并、压缩 html/css/javascritp/图片,减少网络请求,同时降低网络负担

    三.安装:

      1.全局安装:cnpm install -g gulp

      2.本地安装:cnpm install --save-dev gulp

    四.使用:

      1.在项目根目录下创建一个名为 gulpfile.js 的文件:

        var gulp = require('gulp');

        gulp.task('default',function(){

          //将你的默认的任务代码放在这里

        });

      2.运行gulp:

        在文件目录命令行中输入:gulp 。

        默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。

        想要单独执行特定的任务(task),请输入 gulp <task> <othertask>。  

    五.核心API介绍:

      1.gulp.task(name[,deps],fn):

        task()方法用于定义任务,传入名字、依赖任务数组、函数即可,gulp会先执行任务数组,结束后调用定义的函数,可以通过此手段控制任务的执行顺利。

        例子:要定义一个任务build来执行css、js、imgs这三个任务,我们可以通过指定一个任务数组而不是函数来完成。

          gulp.task('build',['css','js','imgs']);

      2.gulp.src(globs[,options]):

        src()方法输入一个glob或者glob数组,然后返回一个可以传递给插件的数据流

        Gulp使用node-glob来从你指定的glob里面获得文件:

        例如: 

          (1).app.js 精确匹配

          (2).*.js 能匹配js后缀的文件

          (3).**/*.js 能匹配多级目录下的js 文件(包括当前目录下)

          (4).!js/app.js 精确排除

        例子:js目录下包含了压缩和未压缩的js文件,我们想要压缩还没有被压缩的文件

          gulp.src(['js/**/*.js','!js/**/*.min.js']);

      3.gulp.dest(path[,options])

        dest()方法用来写文件,第一个参数表示最终输出的目录名。注意,它无法允许我们指明最终输出的文件名,只能指定输出文件夹名,而且在文件夹不存在的情况下会自动创建。

        例子:把开发目录src下的js文件输出到部署目录dist下

          gulp.src('src/**/*.js')

            .pipe(gulp.dest('dist'));

      4.gulp.watch(globs[,opts],cb) 或者 gulp.watch(glob[,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对象

        (1).watcher对象可以监听很多事件:

           change 文件变化时触发

           end 在watcher结束时触发

           error 在出现error时触发

           ready 在文件被找到并正被监听时触发

           nomatch 在glob没有匹配到任何文件时触发

        (2).Watcher对象也包含了一些可以调用的方法:

            watcher.end() 停止watcher

            watcher.files() 返回watcher监听的文件列表

            watcher.add(glob) 将与指定glob相匹配的文件添加到watcher(也接受可选的回调当第二个参数)

            watcher.remove(filepath) 从watcher中移除个别文件

    六.配置gulpfile.js:

      任务会让所有的文件匹配js/*.js,并且执行JSHint,然后打印输出结果,取消文件缩进,最后把他们合并起来,保存为build/app.js,整个过程如下图所示:

      Read files -> JSHint -> Minify -> Concat -> Write files:

      代码:

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

        });

      

  • 相关阅读:
    访问网站出现EOF
    ExecutorService中submit()和execute()的区别
    JAVA设计模式之工厂模式
    使用cssQuery选择器语法来查找元素
    【转载 待读】卷积神经网络
    Python random模块(获取随机数)常用方法和使用例子
    Python 字符串操作方法大全
    Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat 解决办法
    如何在Windows 10安装和使用Linux的Bash shell
    python之内置函数
  • 原文地址:https://www.cnblogs.com/zhihaospace/p/6243428.html
Copyright © 2020-2023  润新知