zoukankan      html  css  js  c++  java
  • 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'));

        });

      

  • 相关阅读:
    jvm基本结构和解析
    多态的意思
    java中对象的简单解读
    double类型和int类型的区别
    python 解析xml文件
    win10不能映射Ubuntu共享文件
    Qt程序打包
    Ubuntu boot分区文件误删,系统无法启动,怎么解
    ubuntu Boot空间不够问题“The volume boot has only 5.1MB disk space remaining”
    Ubuntu 分辨率更改 xrandr Failed to get size of gamma for output default
  • 原文地址:https://www.cnblogs.com/zhihaospace/p/6243428.html
Copyright © 2011-2022 走看看